点击Link跳转至/results页面时出现basename解构为null的错误求助

错误原因 #

这个错误的核心是**Link组件没有处在react-router-dom提供的路由上下文范围内**。

看你的代码结构：Header组件直接在RouterProvider外部渲染，而SearchResult组件应该是被Header引用的。此时SearchResult里的Link无法访问到路由上下文（由RouterProvider提供），因此会抛出解构basename失败的错误。

修复方案 #

调整组件层级，让Header处于路由上下文覆盖的范围内，有两种常见实现方式：

方式一：将Header作为根路由的一部分 #

修改根路由的element，把Header和Body组合起来：

// App.jsx
function App() {
  return (
    <Provider store={store}>
      <RouterProvider router={appRouter} />
    </Provider>
  );
}

const appRouter = createBrowserRouter([
  {
    path: "/",
    element: (
      <>
        <Header />
        <Body />
      </>
    ),
    children: [
      { path: "/", element: <MainContainer /> },
      { path: "/watch", element: <WatchPage /> },
      { path: "/results", element: <SearchedVdoContainer /> }
    ],
  },
]);

方式二：在Body组件中嵌套Header #

如果Body是页面主体容器，直接在Body内部渲染Header，使其自然处于路由上下文内：

// Body.jsx示例
import { Outlet } from "react-router-dom";
import Header from "./Header";

const Body = () => {
  return (
    <>
      <Header />
      <Outlet /> {/* 渲染子路由内容 */}
    </>
  );
};

export default Body;

验证修改 #

调整后，SearchResult组件里的Link就能正常获取路由上下文，点击跳转时不会再抛出错误。

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