React Router 6.4.0 如何为所有路由配置公共Header？

问题根源 #

你当前的写法中，<RouterProvider>内部的<div>Header</div>和<Outlet>不会被渲染——因为RouterProvider仅负责根据传入的router配置管理路由渲染，不处理自身子节点。要实现所有路由共享公共Header，需要使用布局路由的方式重构路由结构。

解决方案步骤 #

1. 创建公共布局组件

新建Layout.js组件，将公共Header和路由出口(Outlet)封装在这里：

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

const Layout = () => {
  return (
    <>
      <div>Header</div>
      <Outlet /> {/* 子路由内容会渲染到这里 */}
    </>
  );
};

export default Layout;

2. 重构路由配置(routes.js)

将Home和About作为布局组件的子路由，让所有页面继承公共布局：

import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
import Home from "../pages/Home/Home";
import Layout from "../components/Layout"; // 引入布局组件
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () => {
  if (!isAuthenticated()) {
    return redirect("https://google.com");
  } else {
    return getUser();
  }
};

export const routers = createBrowserRouter([
  {
    path: "/",
    element: <Layout />, // 根路由绑定布局组件
    children: [
      {
        index: true, // 路径为"/"时渲染Home
        element: <Home />,
        loader: authLoader,
      },
      {
        path: "about", // 相对路径，完整路径为"/about"
        element: <About />,
      },
    ],
  },
]);

3. 简化App.js

移除无效的子节点，仅保留RouterProvider：

import './App.css';
import { RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";

function App() {
  return <RouterProvider router={routers} />;
}

export default App;

4. 清理Home.js中的重复Header

删除Home组件内的冗余Header代码：

import React from "react";
import { Link, useLoaderData } from "react-router-dom";

const Home = () => {
  const loaderData = useLoaderData();

  return (
    <>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <div>Home: {loaderData}</div>
    </>
  );
};
 
export default Home;

原理说明 #

react-router-dom 6.4+通过路由嵌套实现布局复用：布局组件中的<Outlet>会自动渲染其下子路由的内容。将公共Header放在布局组件中后，所有子路由页面都会自动带上这个Header，无需重复编写。

内容的提问来源于stack exchange，提问作者Vivek Kurmi