react-router-dom V6中RouterProvider外使用Link及指定路由渲染DOM

你想的方案完全可行，核心思路就是把RouterProvider移到外层包裹整个应用，同时用React Router V6的Outlet组件指定路由内容的渲染位置。具体操作如下：

1. 创建根布局组件 #

先写一个包含Header、Sidebar和路由内容容器的根布局，用Outlet标记子路由内容的渲染位置：

import { Outlet } from 'react-router-dom';

const RootLayout = () => {
  return (
    <div className="w-full h-full bg-mirage-950 text-white font-light">
      <Header />
      <div className="flex w-full">
        <Sidebar /> {/* 现在Sidebar处于RouterProvider范围内，可正常使用Link */}
        <div className="px-7 py-4 pl-[230px]">
          <Outlet /> {/* 所有子路由的元素都会渲染在这里 */}
        </div>
      </div>
    </div>
  );
};

2. 修改路由配置 #

把原来的路由全部改成根布局的子路由：

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />, // 根布局作为父路由的容器
    children: [ // 子路由列表
      { path: '/', element: <Dashboard /> },
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/tasks', element: <Dashboard /> },
      { path: '/jobs', element: <Dashboard /> },
      { path: '/edit-resume', element: <Dashboard /> }
    ]
  }
]);

3. 调整root.render结构 #

现在只需要让RouterProvider包裹整个应用即可：

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

逻辑说明 #

• RouterProvider提供路由上下文，所有需要用Link、useNavigate等路由API的组件，必须在它的包裹范围内才能正常工作。
• Outlet是React Router专门用来标记子路由内容渲染位置的组件，刚好满足你需要在指定div中渲染路由元素的需求。
• 根布局的写法还能让Header、Sidebar这类公共组件在所有路由页面复用，避免重复代码。

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