如何使一个组件既是 BrowserRouter 的子组件又是 React Router v6 中所有路由的父组件（函数语法）？

Question

在 React Router v6 中，您可以使用组件来定义路由器，如下所示：

export default () => (
  <BrowserRouter>
    <MyProvider>
      <Routes>
        ...
      </Routes>
    </MyProvider>
  </BrowserRouter>
);

其中

MyProvider

组件能够包装所有路由，同时也是

BrowserRouter

组件的子组件（因此它能够使用像

useNavigate()

这样的 React Router 钩子）。

但是如何使用函数语法复制它，即

const router = createBrowserRouter([
  ...
]);

export default () => (
  <RouterProvider router={router} />
);

Answer 1

创建一个渲染提供程序组件的布局路由，并将

Outlet

作为其子组件，并且它包装的所有嵌套路由都将渲染到它提供的上下文下的插座中。

示例：

const MyProviderLayout = () => (
  <MyProvider>
    <Outlet />
  </MyProvider>
);

const router = createBrowserRouter([
  ...
  {
    element={<MyProviderLayout />}
    children: [
      ... routes that access the `MyProvider` context ...
    ],
  },
  ... other routes ...
]);

export default () => (
  <RouterProvider router={router} />
);