React Router v6 中的頁面布局損壞

Question

在將 React Router 更新到 v6 之后，我正在重構我的 React 應用程序，並且我擺脫了我在路由中遇到的錯誤，但現在所需的布局被破壞了。

我需要包含一個永久工具欄和一個側邊欄，以便僅在某些頁面中可見。 我試圖按照文檔進行操作，但現在布局組件被放置在它應該包裝的所有頁面之上，不僅僅是重疊它們，而是實際上將它們隱藏在它后面。

布局組件：

function Layout({ children }) {
  return (
    <div className="layout">
      <Header />
      <SidePanel />
      <div className="main" style={{ marginTop: "100px" }}>
        {children}
      </div>
    </div>
  );
}

export default Layout;

AppRouter 組件：

function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/sign-up" element={<SignUp />} />
        <Route element={<Layout />}>
          <Route path="/diary" element={<Diary />} />
          <Route path="/results" element={<Results />} />
          <Route path="/details" element={<Details />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default AppRouter;

Answer 1

Layout應該為要渲染的子Routes渲染一個Outlet 。

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

function Layout() {
  return (
    <div className="layout">
      <Header />
      <SidePanel />
      <div className="main" style={{ marginTop: "100px" }}>
        <Outlet />
      </div>
    </div>
  );
}

出口

<Outlet>應該在父路由元素中使用以呈現其子路由元素。 這允許在渲染子路由時顯示嵌套 UI。