React Router v6 中的页面布局损坏答案

【问题标题】：Page layout broken in React Router v6React Router v6 中的页面布局损坏
【发布时间】：2021-12-27 02:53:33
【问题描述】：

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

【问题讨论】：

标签： reactjs layout react-router

【解决方案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

应该在父路由元素中使用<Outlet> 来呈现它们的子路由元素。这允许嵌套的 UI 在孩子时显示路线被渲染。

【讨论】：