React-Router v6 混淆

Question

在 ReactRouter 教程页面上，他们说如下

当路线有孩子时，它会做两件事：

1. 它嵌套了 URL（“/”+“费用”和“/”+“发票”）
2. 当子路由匹配时，它将嵌套 UI 组件以进行共享布局：

“它会筑巢......”让我感到困惑，这是什么意思？

Answer 1

考虑以下路由示例：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="invoices" element={<Invoices />} />
    <Route path="expenses" element={<Expenses />} />
  </Route>
</Routes> 

它嵌套了 URL（“/”+“费用”和“/”+“发票”）

嵌套路由相对于其父布局路由呈现其路径。

<Routes>
  <Route path="/" element={<Layout />}>              // "/"
    <Route path="invoices" element={<Invoices />} /> // "/invoices"
    <Route path="expenses" element={<Expenses />} /> // "/expenses"
  </Route>
</Routes> 

当子路由匹配时，它将嵌套 UI 组件以进行共享布局：

Layout组件至少会为嵌套路由渲染一个Outlet组件。 它还可以渲染其他常见的 UI 元素，即网格布局、列、页眉/内容/页脚等。

示例布局组件：

import { Outlet } from 'react-router-dom';

const Layout = () => (
  <>
    <Navbar />
    <Sidebar />
    <Outlet /> // <-- nested routes components render here
    <Footer />
  </>
);

当 URL 路径更新时， Layout组件保持挂载状态，并且只有匹配的路由组件被更改。

有关更多详细信息，请参阅：

• 奥特莱斯
• 布局路线