Question

我定义了以下路线

const routes = (
  <Router history={history}>
    <Route path='/' component={Landing}>
      <Route path='' component={Invitation}/>
      <Route path='signin' component={Signin}/>
    </Route>
    <Route path='*' component={NoMatch}/>
  </Router>
);

我希望在访问根/路由时，Invitation组件在Landing组件内呈现，但我没有找到一种方法来执行此操作而不使用嵌套路线/ URL

有什么想法吗？

Answer 1

我认为实现它的最好方法是使用IndexRoute，它也需要嵌套，但我特别为你的用例设计。

const routes = (
  <Router history={history}>
    <Route path='/' component={Landing}>
      <IndexRoute component={Invitation}/>
      <Route path='signin' component={Signin}/>
    </Route>
    <Route path='*' component={NoMatch}/>
  </Router>
);

参见文档： https://github.com/rackt/react-router/blob/1.0.x/docs/guides/basics/IndexRoutes.md

在同一路线上嵌套多个组件

1 个答案: