如何实现动态路由在routes.js中生成的菜单项在侧边栏通用反应redux样板由erikras?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

我目前正在开发基于CMS的项目。

为此,我使用erikras的万能反应原型样板

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

让我们从样板文件中获取一个简单的场景...

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数据中的属性会发生变化

让我们说新的财产:是

{id: 4, property: 'test page', link: '/test'}

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

我没有得到正确的实施方式

根据用户角色,我们需要一个由特定菜单内容组成的边栏。

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

所以不同的角色会有不同的属性,因此我们需要在它的基础上生成菜单,因为属性肯定会因用户角色而有所不同。

提问于
用户回答回答于

从你的例子中不清楚应该为/testurl 提供哪个组件?我想这是property钥匙的价值,对吧?

第一个选项

你可以做的是这样的:

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

它将允许Page为每个网址呈现组件,从/该组件开始,并且此组件将具有页面网址this.props.routeParams.page。它允许你在里面找到需要的组件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}/>)
用户回答回答于

第三选项:

按照react-router示例中的“huge-apps”来动态加载路由。

项目结构为路线和组件提供逻辑层次结构。他们的方法也使用webpack加载与页面特定的捆绑代码共享的捆绑包。该项目有一个路径文件夹。在该示例中,层次结构的动态部分来自存根文件夹中的数据,该文件夹中的数据可以更改为使用其他数据源。该方法是有效的。

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

`repo在主分支上不再包含这个例子。

扫码关注云+社区

领取腾讯云代金券