Reactjs 如何在routes.js中为erikras提供的universal react redux样板文件中边栏中生成的菜单项实现动态路由

我目前正在从事一个基于CMS的项目

为此，我使用了erikras的universal react redux样板文件

我真的需要关于处理动态路由的建议

让我们从样板中选取一个简单的场景

在routes.js中

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

export const data = [
  {id: 1, property: 'Dashboard', link: '/'},
  {id: 2, property: 'Login', link: '/login'},
  {id: 3, property: 'About Us', link: '/About'},
];

现在，假设在用户角色的基础上，json数据中的属性将发生变化

比如说新的财产：是吗

当react将呈现组件时，它将如何知道路由链接。。因为它没有在routes.js中定义

我没有得到正确的方法来实施它

我们需要一个边栏的具体菜单内容根据用户角色

假设我们正在构建一个预订系统，可以有不同的用户角色，如管理员、维护模式、助理角色

所以不同的角色会有不同的属性，因此我们需要根据它生成菜单，因为属性肯定会根据用户角色而不同

---

谢谢

从您的示例中不清楚应该为

/test

url呈现哪个组件？我想这是

属性
键的值，对吗

第一选择
您可以这样做：

<Route path="/:page" component={Page}/>

第二种选择
您可以动态生成路由，但我不确定它是否有效（您可以检查它）。您只需更换此部件：

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>



与

data.map（第=>）
第三个选项：


项目结构为管线和组件提供了逻辑层次结构。他们的方法还使用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

```
回购协议不再在主分支上包含此示例
 谢谢你，亚历山大。第二种选择更适合我的情况。我正在使用data.map（）动态生成路由。它似乎是可行的，现在我期待着看看它的嵌套子元素是否会起作用。与测试组件类似：嵌套路径为：test/childItem1、test/childItem2、test/childItem3等等，第一个选项看起来不错。您能告诉我，在第二个选项中，我如何将动态路由传递到路由文件吗？@Dev您是否实现了第二个选项，并且它正在工作？请让我知道，我有与您类似的要求。第二个不起作用，因为
component
需要的不是字符串而是组件类（除非您希望呈现DOM元素）。。。请参见
const url=this.props.match.params.id
为我工作。看起来他们的答案已经更改，但这可能从理论上回答了这个问题，包括这里答案的基本部分，并提供链接供参考。-1因为链接不起作用，答案本身也没有提供任何关于如何解决问题的信息
<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}/>)

|____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