React Router v6 中的頁面佈局損壞

亞歷克斯·布拉加

在將 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;

德魯里斯

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

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

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

出口