React路由器顯示根路由的內容

Question

我正在使用React路由器進行SPA，但我不確定如何在索引路由「/」上顯示某些內容。

我的頂級路由器的配置僅僅是：

<Route path="/" component={App}> 
    // ... 
</Route> 

頂級組件顯示在頁眉/頁腳等普通元素：

<nav> 
    // ... 
</nav> 

{children} 

<nav className="footer"> 
    // ... 
</nav> 

子路由工作正常，並且它們呈現內App組件。但是，如何在根路徑上呈現一些內容，因此它不僅僅是一個空白頁面？

Answer 1

說出你想爲根路由服務的內容<App>是<Home>，下面引用的是react-route的guide。

<Router> 
    <Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="accounts" component={Accounts}/> 
    <Route path="statements" component={Statements}/> 
    </Route> 
</Router> 

這就是<App>可能的樣子。

const App = React.createClass({ 
    render() { 
     return {this.props.children || <Home/>}; 
    } 
});