reactjs - 如何在routes.js中实现通用react redux样板中侧边栏中生成的菜单项的动态路由，作者:erikras

Question

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

为此，我使用 erikras 的通用 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渲染组件时，它如何知道路由链接..因为它没有在routes.js中定义

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

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

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

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

谢谢!!

Answer 1

从您的示例中不清楚应该为 /test url 呈现哪个组件？我想它是 property 键的值，对吧？

第一个选项

你可以这样做:

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

它将允许您为每个 url 渲染 Page 组件，该组件从 / 开始，并且该组件将在 this.props.routeParams 中包含页面 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}/>)