反应路由器和嵌套路由

Question

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

我有一个应用程序，它具有Login组件的顶级路由：

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

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

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

所以，重申：

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

path /foo使用其中的Foo组件呈现Home组件

...

路径/login呈现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>