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

IT技术 reactjs menuitem react-router
2021-04-13 17:48:54

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

数据.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 中定义

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

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

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

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

谢谢！！

2个回答

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

第一个选项

你可以做的是这样的：

<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}/>)
const url = this.props.match.params.id 为我工作。看起来他们已经改变了
2021-05-25 17:48:54
@Dev 您是否实施了第二个选项并且它正在工作？请告诉我，我和你有类似的要求。
2021-05-27 17:48:54
第二个不起作用，因为component不需要字符串而是需要组件类（除非您要呈现 DOM 元素）...请参阅stackoverflow.com/q/48854497/5647260
2021-05-28 17:48:54
谢谢亚历山大。第二种选择更适合我的情况。我正在使用 data.map() 动态生成路由。看起来它有效，现在我期待着看看它的嵌套子元素是否有效。就像测试组件：嵌套路由是： test/childItem1 ， test/childItem2 ， test/childItem3 等等，，
2021-06-07 17:48:54
第一个选项看起来不错。你能告诉我如何在第二个选项中，我可以将动态路由传递给路由文件吗？
2021-06-07 17:48:54

第三个选项：

按照 react-router 示例 'huge-apps' 动态加载路由。

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

|____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 分支上包含此示例。

-1 因为链接不起作用，答案本身并没有提供有关如何解决问题的任何信息
2021-05-31 17:48:54
虽然这在理论上可以回答问题，但最好在此处包含答案的基本部分，并提供链接以供参考。
2021-06-03 17:48:54
其它你可能感兴趣的问题
上一篇带有react-router v6 的受保护路由 下一篇在 React Native App 中禁用屏幕截图/屏幕截图