反應路由器 v6 和嵌套 UI 和 URL

Question

我試圖弄清楚這段代碼的含義：

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

https://reactrouter.com/docs/en/v6/components/route

如果位置是/ ，那么渲染的 UI 將是

<Dashboard />

而如果位置是/messages ，那么渲染的 UI 將是

<Dashboard >
  <DashboardMessages />
<Dashboard />

/tasks和/about的邏輯相同。

我的理解正確嗎？

Answer 1

你的理解是部分正確的。 給定以下路由代碼：

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route path="messages" element={<DashboardMessages />} />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

正確的是，當 URL 路徑為"/"時，僅呈現Dashboard組件。 這就是所謂的布局路線。 布局路由通常提供一些通用組件生命周期和/或通用 UI 布局，即頁眉和頁腳、導航欄、側邊欄等。

當 URL 路徑為"/messages"或"/tasks"時， Dashboard組件以及專門匹配的路由內容DashboardMessages或DashboardTasks被呈現到由Dashboard呈現的Outlet組件中。

請注意， "/about"路線位於"/"儀表板布局路線之外。 當路徑為"/about"時，僅呈現AboutPage 。

這是一個示例布局路由組件：

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

const AppLayout = () => {
  ... common logic ...

  return (
    <>
      <Header />
      <Outlet /> // <-- nested routes render element here
      <Footer />
    </>
  );
};

const NavbarLayout = () => (
  <>
    <Navbar />
    <Outlet /> // <-- nested routes render element here
  </>
);

...

<Routes>
  <Route element={<AppLayout />}>
    ... routes w/ header/footer & w/o navbar

    <Route element={<NavbarLayout />}>
      ... routes also w/ navbar
    </Route>

    ...
  </Route>

  ... routes w/o header/footer
</Routes>