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

Question

我目前正在开发基于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数据中的属性将发生变化

让我们说新的财产:是

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

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

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

我们需要根据用户角色由特定菜单内容组成的侧边栏.

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

因此,不同的角色将具有不同的属性,因此我们需要在其基础上生成菜单,因为属性肯定会根据用户角色而不同.

谢谢!!

Answer 1

从您的示例中不清楚应该为/testurl 呈现哪个组件？我想这是property关键的价值,对吧？

第一种选择

你可以这样做:

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

它将允许您Page为每个url 呈现组件/,该组件从此开始,并且此组件将在其中包含页面url 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}/>)