如何用createBrowserRouter来制作jsx模板

从我的理解来看：

1. <Route loader...>"只有在使用数据路由器的情况下才有效"。
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（以及它导入的所有内容）？

渲染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>
  );
}

React Router的例子提供了另一种建立路由结构的小方法。

let routes: RouteObject[] = [
{
  path: "/",
  element: <Layout />,
  children: [
    { index: true, element: <Home /> },
    {
      path: "/courses",
      element: <Courses />,
      children: [
        { index: true, element: <CoursesIndex /> },
        { path: "/courses/:id", element: <Course /> },
      ],
    },
    { path: "*", element: <NoMatch /> },
  ],
},
];  

https://stackblitz.com/github/remix-run/react-router/tree/main/examples/route-objects?file=src%2FApp.tsx