React路由器在根路由上显示内容

Question

我使用React路由器的SPA，但我不确定如何显示索引路由"/"上的一些内容。

我的顶级路由器配置只是：

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

顶层组件呈现页眉/页脚和其他公共元素：

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

{children}

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

子路由工作正常，它们在应用程序组件中呈现。但是，如何在根路径上呈现某些内容，使其不只是一个空白页面？

Answer 1

在中说出要为根路由提供的内容。

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

这就是

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