Question

我使用React路由器进行SPA，但我不确定如何在索引路径上显示某些内容＆＃34; /＆＃34;。

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

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

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

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

{children}

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

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

Answer 1

假设您要为<App>中的根路线投放的内容为<Home>，下面的引用来自react-route的{{3}}。

<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/>};
    }
});

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

1 个答案: