反应路由器和嵌套路由

Posted 2023-02-22

【中文标题】反应路由器和嵌套路由

【英文标题】：React router and nested routes

【发布时间】：2016-08-18 05:20:42

【问题描述】：

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

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

以及应用程序本身的另一个***路由（我们称之为 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>

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

【问题讨论】：

听起来您应该在 Welcome 组件中包含 Login 组件。在 Welcome 组件中创建一个渲染函数来渲染 Login 或 Welcome 组件，这取决于他们是否已登录。

【参考方案1】：

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

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

【讨论】：

耶！这完美！感谢您的解决方案。