使用createBrowserRouter添加Link报错：无法解构'basename'

这个错误的核心原因是：Link组件没有处于路由上下文（RouterProvider提供的环境）中。react-router-dom的Link依赖路由上下文来获取basename等路由配置信息，如果组件在RouterProvider的子树之外使用Link，useContext会返回null，解构时就会抛出这个错误。

排查与修复步骤 #

1. 确认路由提供者的层级
   确保RouterProvider是应用的顶层包裹组件，所有使用Link的组件都在它的子范围内。入口文件的正确结构示例：

   import { RouterProvider } from 'react-router-dom';
   import { router } from './router'; // 你的路由配置文件
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <RouterProvider router={router} />
   );
   

2. 检查App组件的路由层级
   你的App组件应该作为路由的一部分被渲染（即嵌套在Route的element属性中），而不是在RouterProvider外部。正确的路由配置示例：

   // router.jsx
   import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
   import Homepage from './Homepage';
   import AboutMe from './AboutMe';
   import App from './App';
   
   export const router = createBrowserRouter(
     createRoutesFromElements(
       <Route path="/" element={<App />}>
         {/* 嵌套路由，对应App中的<Outlet /> */}
         <Route index element={<Homepage />} />
         <Route path="about-me" element={<AboutMe />} />
       </Route>
     )
   );
   

3. 在App中正确使用Link和Outlet
   在App组件内，Link可以正常使用，同时用Outlet渲染嵌套路由的内容：

   import { Link, Outlet } from 'react-router-dom';
   
   function App() {
     return (
       <div>
         <nav>
           <Link to="/">首页</Link>
           <Link to="/about-me">关于我</Link>
         </nav>
         {/* 渲染Homepage或AboutMe组件 */}
         <Outlet />
       </div>
     );
   }
   
   export default App;
   

常见错误场景 #

• 把App作为根组件直接渲染，然后在App内部才渲染RouterProvider，导致App自身的Link不在路由上下文中。
• 路由配置中没有将App作为路由的父组件，而是直接将Homepage和AboutMe设为顶级路由，同时在App中使用Link但App不在路由上下文里。

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