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({ children }) {
  return (
    <div className="layout">
      <Header />
      <SidePanel />
      <div className="main" style={{ marginTop: "100px" }}>
        <Outlet />
      </div>
    </div>
  );
}

Outlet

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered.

React Router v6 中的页面布局损坏

Page layout broken in React Router v6

layout

reactjs

react-router