反应路由器和嵌套路由

Question

我对如何创建以下（非常简单的）路由结构感到困惑。

我有一个应用程序有一个用于登录组件的 top-level 路由：

和应用程序本身的另一个 top-level 路由（我们称它为 Home 组件）：

现在，Home 组件有一个 header、一个边栏和 child 视图的主要 space。

登录组件应显示在 /login 路径；这很简单。但让我感到困惑的是，我希望 / 路径在主视图中显示带有特定 child 组件（我们称之为 Welcome）的 Home 组件。此外，我能想到的大多数其他路由都应该在 Home 组件内呈现 child 组件。

所以，重申一下：

path / 呈现 Home 组件，其中包含 Welcome 组件

path /foo 渲染 Home 组件，其中包含 Foo 组件

...

路径/login 呈现登录组件

感觉自己想的结构是：

  <Route path='/' component={App}>
    <IndexRoute component={Home}>
        <IndexRoute component={Welcome}>
        <Route path='foo' component={Foo}/>
    </IndexRoute>
    <Route path='login' component={Login}/>
  </Route>

但这显然是错误的。实现此路由结构的正确方法是什么？

Answer 1

这可能是一个很好的解决方案，试一试。

<Route component={App}>
  <Route path="/" component={Home}>
    <IndexRoute component={Welcome}/>
    <Route path="/foo" component={Foo}/>
  </Route>
  <Route path="/login" component={Login}/>
</Route>

反应路由器和嵌套路由

React router and nested routes

reactjs

react-router