router-dom v6.15.0中如何配置带Link的全局Sidebar等组件？

问题出在你把Sidebar和SearchField放在了RouterProvider外部，导致组件内的Link无法获取路由上下文，自然会报错。同时直接修改根路由元素的方式没有利用嵌套路由，所以其他页面不会继承这两个组件的显示。

正确的做法是使用嵌套路由+全局布局，让所有页面共享同一个包含Sidebar和SearchField的布局：

1. 修改路由配置 #

首先在路由配置里创建一个根布局路由，用Outlet渲染子路由的内容，把所有页面路由作为它的子路由：

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

const router = createBrowserRouter([
  {
    path: "/",
    // 全局布局：所有页面都会显示这两个组件
    element: (
      <div id="page">
        <Sidebar />
        <SearchField />
        <Outlet /> {/* 子路由的内容会渲染在这 */}
      </div>
    ),
    children: [
      // 根路径重定向（用index路由匹配父路径的默认情况）
      {
        index: true,
        loader: () => redirect("city/New%20York"),
        element: <></>,
      },
      {
        path: "city/:cityName",
        element: <WeatherContent />,
      },
      {
        path: "cities",
        element: <WeatherContent />,
      },
      {
        path: "settings",
        element: <WeatherContent />,
      },
      {
        path: "*",
        element: (
          <div>
            <h1>Error 404</h1>
            <h2>page not found</h2>
            <Link to="/">Go back home</Link> {/* 修正跳转路径，原"home"不存在 */}
          </div>
        ),
      },
    ],
  },
]);

2. 简化App组件 #

现在App组件只需要渲染RouterProvider即可，不用再单独放置Sidebar和SearchField：

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

为什么这样能解决问题 #

• Sidebar和SearchField现在处于RouterProvider提供的路由上下文内部，组件内的Link可以正常获取路由信息，不会报错。
• 通过Outlet实现嵌套路由，所有子路由都会自动继承根布局的内容，确保这两个组件在所有页面显示。
• 保留了根路径的重定向逻辑，访问/时依然会跳转到纽约的天气页面。

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