反应路由器和嵌套路由

Question

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

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

以及应用本身的另一条顶层路线（我们称其为Home组件）：

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

Login组件应显示在/login路径中； 那很简单。 但是令我困惑的是，我希望/路径在主视图中显示Home组件和特定的子组件（我们称其为Welcome）。 另外，我想到的大多数其他路由都应在Home组件内渲染子组件。

因此，重申一下：

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

路径/foo呈现带有Foo组件的Home组件

...

路径/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>