React Router v6函数式语法下，如何让组件同时为BrowserRouter子组件与路由父组件？

在React Router v6中，你原本可以用组件式写法让MyProvider包裹所有路由，同时能正常访问路由钩子：

export default () => (
  <BrowserRouter>
    <MyProvider>
      <Routes>
        {/* 业务路由定义 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </MyProvider>
  </BrowserRouter>
);

要换成createBrowserRouter的函数式写法，只需通过根路由嵌套+Outlet的方式实现，具体代码如下：

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

// 根路由组件：用MyProvider包裹Outlet，确保所有子路由都被Provider覆盖
const Root = () => {
  // 这里可以正常使用useNavigate等路由钩子，还能传递给MyProvider
  const navigate = useNavigate();
  
  return (
    <MyProvider navigate={navigate}>
      <Outlet />
    </MyProvider>
  );
};

// 创建路由配置
const router = createBrowserRouter([
  {
    element: <Root />,
    // 所有业务路由作为根路由的子项
    children: [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> },
      // 更多路由...
    ],
  },
]);

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

核心逻辑说明 #

• Root组件作为路由的顶层element，处于React Router的上下文环境中，因此MyProvider内部可以直接使用useNavigate、useLocation等路由钩子
• <Outlet>是React Router提供的组件，会自动渲染匹配到的子路由内容，完全等价于组件式写法中MyProvider包裹<Routes>的效果

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