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应该为要渲染的Outlet孩子渲染一个。Routes

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

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

出口

<Outlet>应该在父路由元素中使用An来渲染其子路由元素。这允许在渲染子路由时显示嵌套的 UI。