如何在Erickras的Universal React Redux样板中的侧边栏中为生成的菜单项在route.js中实现动态路由

Question

我目前正在从事基于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}/>

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将呈现组件时，它将如何知道路由链接..，因为未在route.js中定义

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

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

假设我们正在建立一个预订系统，可以有不同的用户角色，例如admin，维护模式，助手角色。

因此，不同的角色将具有不同的属性，因此，由于每个用户角色的属性肯定不同，因此我们需要在此基础上生成菜单。

谢谢！！

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 />;
}

第二选择

您可以动态生成Routes，但是我不确定它是否有效（您可以检查一下）。您只需要替换此部分：

<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}/>)