如何使用 createBrowserRouter 模板化 jsx

Question

据我了解：

1. <路由加载器...>“仅在使用数据路由器时有效”
2. 数据路由器（如 createBrowserRouter）不允许将“所有”路由包装在包含 <Link> 组件的 jsx 中。查看示例

示例：非数据路由器

<Router>
  <header>
    <Link to="/">Home</Link>
  </header>
  <Routes>
    <Route...>
    <Route...>
  </Routes>
</Router>

示例：数据路由器（引发错误）完整示例

const router = createBrowserRouter([....]);
<div>
  <header>
    <Link to="/">Home</Link>
  </header>
  <RouterProvider router={router} />
</div>

我的问题是：我们如何创建一个使用 <Link> 功能的模板来包装 RouterProvider （及其导入的所有内容）的模板？

Answer 1

header将/组件渲染Navbar为路由配置的一部分。在本例中，您将创建一个渲染标题和导航栏的布局路由，以及一个Outlet用于渲染其内容的嵌套路由。

例子：

export const Navbar = () => {
  return (
    <div>
      <Link to='/'>Home</Link>
      <Link to='/foo'>Foo</Link>
      <Link to='/bar'>Bar</Link>
    </div>
  );
};

...

import {
  createBrowserRouter,
  RouterProvider,
  Outlet
} from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <header>
      <Navbar />
    </header>
    <Outlet />
  </>
);

const router = createBrowserRouter([
  {
    element: <HeaderLayout />,
    children: [
      {
        path: "/",
        element: <div>Hello</div>,
      },
      {
        path: '/foo',
        element: <div>foo</div>,
      },
      {
        path: '/bar',
        element: <div>foo</div>,
      }
    ],
  },
]);

export function App(props) {
  return (
    <div className='App'>
      <RouterProvider router={router} />
    </div>
  );
}