反应路由器和嵌套路由

Question

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

我有一个应用，它有一个登录组件的顶级路由：

以及应用程序本身的另一个顶级路由（我们称之为 Home 组件）：

现在，Home 组件有一个标题、一个侧边栏和子视图的主要空间。

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

所以，重申一下：

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

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

...

path /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>