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。