我目前正在从事一个基于CMS的项目。
为此,我使用了erikras的通用redux样板。
我真的需要关于处理动态路由的建议
让我们从样板中取一个简单的场景...
在routes.js中
<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>
data.js
export const data = [
{id: 1, property: 'Dashboard', link: '/'},
{id: 2, property: 'Login', link: '/login'},
{id: 3, property: 'About Us', link: '/About'},
];
现在,假设基于用户角色,json数据中的属性将发生变化。
假设有新的属性: is
{id: 4, property: 'test page', link: '/test'}
react何时渲染组件,它如何知道路由链接..因为它没有在routes.js中定义
我没有得到实现它的正确方法。
我们需要一个侧栏为每个用户角色的具体菜单内容。
假设我们正在构建一个预订系统,可以有不同的用户角色,如管理员、维护模式、助理角色。
因此,不同的角色将有不同的属性,因此我们需要在它的基础上生成菜单,因为属性肯定会因用户角色而不同。
谢谢!!
发布于 2016-03-04 15:57:09
在您的示例中,不清楚应该为/test
url呈现哪个组件?我认为它是property
密钥的值,对吗?
第一个选项
你可以这样做:
<Route path="/:page" component={Page}/>
它将允许您为每个url呈现Page
组件,该组件从/
开始,并且此组件将在this.props.routeParams.page
中包含页面url。它允许您在Page#render
中找到所需的组件
render() {
const url = this.props.routeParams.page;
const PageComponent = data.find(page => page.link === url).property;
render <PageComponent />;
}
第二个选项
您可以动态生成路由,但我不确定它是否有效(您可以检查它)。您只需替换此部件:
<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>
使用
data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)
发布于 2017-01-04 23:17:26
第三个选项:
Follow the react-router example 'huge-apps' for dynamically loading routes.
项目结构为管线和组件提供了逻辑层次结构。他们的方法还使用webpack加载具有页面特定捆绑代码的共享捆绑包。该项目有一个routes文件夹。在该示例中,层次结构的动态部分派生自stubs文件夹中的数据,该文件夹可以更改为使用另一个数据源。这种方法是有效的。
|____Calendar
| |____components
| | |____Calendar.js
| |____index.js
|____Course
| |____components
| | |____Course.js
| | |____Dashboard.js
| | |____Nav.js
| |____index.js
| |____routes
| | |____Announcements
| | | |____components
| | | | |____Announcements.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Announcement
| | | | | |____components
| | | | | | |____Announcement.js
| | | | | |____index.js
| | |____Assignments
| | | |____components
| | | | |____Assignments.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Assignment
| | | | | |____components
| | | | | | |____Assignment.js
| | | | | |____index.js
| | |____Grades
| | | |____components
| | | | |____Grades.js
| | | |____index.js
|____Grades
| |____components
| | |____Grades.js
| |____index.js
|____Messages
| |____components
| | |____Messages.js
| |____index.js
|____Profile
| |____components
| | |____Profile.js
| |____index.js
https://stackoverflow.com/questions/35764510
复制相似问题