在函数中创建react-router路由

Question

是否可以通过函数创建<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>中使用某种键= page.id吗？

Answer 1

如果你想特性传递给你的孩子路线的组件，你可以做这样的事情：

 <Route path={page.path} component={() => <CommonPage someProp={page.someProp}/>}/> 

Answer 2

如果要动态地创建阵营路线，那么你可以使用路由与参数，像这样。这是你的路由器：

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参数和页面属性（可通过this.props.route.pages），看看是否当前页码是有效的