如何在routes.js中实现通用react redux模板中工具条菜单项的动态路由
我目前正在从事一个基于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中定义
我没有得到实现它的正确方法。
我们需要一个侧栏为每个用户角色的具体菜单内容。
假设我们正在构建一个预订系统，可以有不同的用户角色，如管理员、维护模式、助理角色。
因此，不同的角色将有不同的属性，因此我们需要在它的基础上生成菜单，因为属性肯定会因用户角色而不同。
谢谢！！
回答 2
Stack Overflow用户
发布于 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}/>)Stack Overflow用户
发布于 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.jshttps://stackoverflow.com/questions/35764510
复制相似问题