我目前正在从事基于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,维护模式,助手角色。
因此,不同的角色将具有不同的属性,因此,由于每个用户角色的属性肯定不同,因此我们需要在此基础上生成菜单。
谢谢!!
从您的示例中尚不清楚应为/testurl 呈现哪个组件?我想这是property钥匙的价值,对吧?
/test
property
您可以执行以下操作:
<Route path="/:page" component={Page}/>
它将允许您Page为每个url 渲染组件/,该组件起始于,并且该组件内部将包含页面url this.props.routeParams.page。它使您可以在其中找到所需的组件Page#render:
Page
/
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,但是我不确定它是否有效(您可以检查一下)。您只需要替换此部分:
与
data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)