React Router v6：RouterProvider外渲染非路由元素的问题

在React Router v6+的createHashRouter体系下，要让NavigationBar能访问路由钩子，最标准的做法是把它作为根布局组件的一部分，通过嵌套路由实现原来的包裹效果，具体步骤如下：

1. 定义根布局组件 #

创建一个包含NavigationBar和Outlet的根布局，Outlet是React Router提供的组件，用于渲染匹配的子路由内容：

import { Outlet } from 'react-router-dom';
import NavigationBar from './NavigationBar';

const RootLayout = () => {
  return (
    <>
      <NavigationBar />
      <Outlet />
    </>
  );
};

2. 重构路由配置 #

用createHashRouter创建路由时，将根布局作为顶级路由的element，原来的所有路由配置都放到children数组中：

import { createHashRouter, RouterProvider } from 'react-router-dom';
import RootLayout from './RootLayout';
import Home from './Home';
import About from './About';
// 导入其他页面组件

const router = createHashRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '', element: <Home /> }, // 默认首页
      { path: 'about', element: <About /> },
      // 其他路由规则...
    ],
  },
]);

3. 渲染RouterProvider #

在应用入口直接渲染RouterProvider即可，无需额外包裹其他元素：

function App() {
  return <RouterProvider router={router} />;
}

为什么这样可行？ #

• 根布局RootLayout会处于React Router的路由上下文之中，因此NavigationBar可以正常调用useNavigate、useLocation等路由钩子。
• Outlet会根据当前匹配的子路由渲染对应页面，和原来用HashRouter包裹routes+NavigationBar的效果完全一致，符合React Router v6推荐的嵌套路由设计模式。

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