我正在使用 createBrowserRouter。在每条路线上渲染页眉和页脚组件的正确方法是什么？

Question

我在 Root 组件中有起始页，并添加了包含在 div 中的页眉和页脚组件，但我不知道如何以最佳方式将它们包含在其余路由中。我是否遗漏了什么或使用了错误的方法？

此外，我使用 createBrowserRouter 而不是 BrowserRouter，因为我使用的是文档Picking a Router中提到的数据 API

这是我的代码：

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <div>
        <Header />
        <Root />
        <Footer />
      </div>
    ),
    errorElement: <ErrorPage />,
  },
  {
    path: '/products',
    element: <ProductsList />,
  },
  {
    path: '/products/:productId',
    element: <SingleProductPage />,
  },
])

const root = ReactDOM.createRoot(document.getElementById('app'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>

当我导航到“/”时，会显示页眉和页脚，但其他路线的情况并非如此。

Answer 1

React Router 有一个布局路由
的概念 ，基本上它是一个没有任何路径的路由，不参与 URL 匹配。

它的存在只是为了使在同一布局中包装多个子路由变得更简单

在您的示例中，您可以声明如下布局路线：

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

function Layout() {
  return (
      <>
        <Header />
        <Outlet />
        <Footer />
      </>
  );
}

const router = createBrowserRouter([
  {
    element: <Layout/>,
    errorElement: <ErrorPage />,
    children: [  
      {
        path: '/',
        element: <Root />
      },
      {
        path: '/products',
        element: <ProductsList />
      },
      {
        path: '/products/:productId',
        element: <SingleProductPage />
      }
    ]
  }
])

<Outlet />请注意组件中存在Layout来显示子路由。