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

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 组件内呈现，但我还没有找到一种不使用的方法嵌套的 route/url

有什么想法吗？

Answer 1

我认为最好的实现方式是使用 IndexRoute，它也需要嵌套，但我认为它是专门为您设计的 use-case。

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

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

Nest multiple components on the same route

reactjs

react-router