如何在Erickras的Universal React Redux样板中的侧边栏中为生成的菜单项在route.js中实现动态路由
我目前正在从事基于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,维护模式,助手角色。
因此,不同的角色将具有不同的属性,因此,由于每个用户角色的属性肯定不同,因此我们需要在此基础上生成菜单。
谢谢!!
-
从您的示例中尚不清楚应为
/test
url 呈现哪个组件?我想这是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}/>)