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

Posted 2023-02-19

【中文标题】如何在 routes.js 中为生成的菜单项在通用反应 redux 样板中的边栏中实现动态路由，由 erikras

【英文标题】：How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras

【发布时间】：2016-06-16 07:50:09

【问题描述】：

我目前正在从事一个基于 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 中定义

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

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

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

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

谢谢！！

【参考方案1】：

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

第一个选项

你可以这样做：

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

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

【讨论】：

谢谢亚历山大。第二种选择更适合我的情况。我正在使用 data.map() 动态生成路由。看来它有效，现在我期待看看它的嵌套子元素是否有效。比如测试组件：嵌套路径是：test/childItem1、test/childItem2、test/childItem3等等，，，

第一个选项看起来不错。你能告诉我如何在第二个选项中，我可以将动态路由传递给路由文件吗？

@Dev 您是否实施了第二个选项并且它正在工作？请告诉我，我有和你类似的要求。

第二个不起作用，因为component 需要的不是字符串而是组件类（除非您要渲染 DOM 元素）...请参阅 ***.com/q/48854497/5647260

const url = this.props.match.params.id 为我工作。看起来他们已经改变了

【参考方案2】：

第三个选项：

Follow the react-router example 'huge-apps' for dynamically loading routes.

项目结构为路径和组件提供了逻辑层次结构。他们的方法还使用 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 不再在 master 分支上包含此示例。

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

-1 因为链接不起作用，答案本身并没有提供任何关于如何解决问题的信息