使用createBrowserRouter如何让Header和Footer在所有路由显示？

你当前的问题是只有根路由页面渲染了Header和Footer，其他路由是独立的路由节点，自然不会带上这些组件。用createBrowserRouter的思路是对的，只需要调整路由结构，通过嵌套路由+布局组件就能实现全局共享Header和Footer。

步骤1：创建全局布局组件 #

先写一个包含Header、Footer的布局组件，用React Router提供的Outlet组件来承载子路由的内容：

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

const Layout = () => {
  return (
    <div>
      <Header />
      <Outlet /> {/* 这里会渲染匹配的子路由组件 */}
      <Footer />
    </div>
  );
};

步骤2：重构路由配置 #

把原来的根路由改成布局组件，然后将所有需要共享Header/Footer的路由作为它的children子路由：

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />, // 用布局组件作为根路由的元素
    errorElement: <ErrorPage />,
    children: [
      { path: '/', element: <Root /> }, // 原来的首页内容
      { path: '/products', element: <ProductsList /> },
      { path: '/products/:productId', element: <SingleProductPage /> },
    ],
  },
]);

原理说明 #

Outlet是React Router专门用来渲染子路由内容的组件，当访问任何子路由路径时，布局组件的Header和Footer会始终渲染，子路由对应的组件会自动替换到Outlet的位置。这种方式既保留了createBrowserRouter支持数据API的特性，又实现了全局公共组件的复用。

内容的提问来源于stack exchange，提问作者Yazan Qarabash