反应路由器在根路由显示内容答案

【问题标题】：React router displaying content at root route反应路由器在根路由显示内容
【发布时间】：2016-11-28 05:56:09
【问题描述】：

我正在将 React 路由器用于 SPA，但我不确定如何在索引路由“/”上显示一些内容。

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

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

顶级组件呈现页眉/页脚和其他常见元素：

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

{children}

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

子路由工作正常，它们在 App 组件中呈现。但是，如何在根路由处呈现一些内容，使其不仅仅是一个空白页面？

【问题讨论】：

标签： reactjs react-router

【解决方案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/>};
    }
});

【讨论】：