在函数中创建react-router路由
在函数中创建react-router路由
提问于 2017-02-15 21:02:56
可以通过函数创建<Route>元素吗？我想要显示不同的路由/页面，但应用程序不知道它们有多少。页面处于存储在页面对象数组中的状态。到目前为止，每个页面对象都有id、title、path和body元素。我认为我的路由器应该是这样的：
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="page1" component={CommonPage}/>
<Route path="page2" component={CommonPage} />
<Route path="page3" component={CommonPage} />
<Route path="page4" component={CommonPage}/>
<Route path="page5" component={CommonPage} />
<Route path="page6" component={CommonPage} />
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
我想用如下的函数来定义它：
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
{
mapPagesToRoutes(pages)
}
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
mapPagesToRoutes(pages) {
return pages.map( page => () {
if(page.type === 'CommonPage' {
return <Route path={page.path} component={CommonPage}
}
}
}
Q1:这是怎么做的？Q2:我如何用路径以外的其他东西来标识每一个。我可以在<Route>中使用某种key=page.id吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-15 22:08:04
如果要将属性传递给子管线组件，可以执行以下操作：
<Route path={page.path} component={() => <CommonPage someProp={page.someProp}/>}/>Stack Overflow用户
发布于 2017-02-15 23:44:14
如果您想要动态创建React路由，那么您可以使用带有参数的路由，如下所示。这是您的路由器：
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="/page:pageNumber" pages={this.state.pages} component={CommonPage} />
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)然后在你的CommonPage组件中拥有类似这样的东西：
render() {
return(<div>This is {this.props.params.pageNumber}</div>);
}这将使您能够导航到任何/pageX路由。然后，在CommonPage组件中，您可以比较pageNumber参数和pages属性(可通过this.props.route.pages获得)，以查看当前页码是否有效
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42259992
复制相关文章
相似问题
腾讯云开发者
