在函數中創建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），看看是否當前頁碼是有效的