如何修复React Router中Link组件的Uncaught TypeError错误？

错误原因 #

这个错误的核心是：react-router-dom的Link组件必须在路由上下文提供者（比如BrowserRouter/HashRouter）的包裹下才能正常工作。如果组件没有被这些提供者包裹，Link内部调用useContext获取路由上下文时会返回null，解构basename属性自然就会抛出类型错误。

修复步骤 #

• 步骤1：定位应用入口文件
  通常是项目根目录下的main.jsx/main.tsx，或者路由逻辑所在的App.jsx文件。

• 步骤2：导入并使用路由提供者
  从react-router-dom导入BrowserRouter（最常用的路由模式），然后用它包裹整个应用组件，或者至少包裹包含Navbar的部分。

  示例修改后的入口文件代码：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  );
  

• 步骤3：确认Navbar在路由上下文范围内
  确保你的Navbar组件是在BrowserRouter包裹的组件树内部被使用的（比如在App组件中引入Navbar），这样Link就能正常获取到路由上下文。

额外检查 #

如果还未安装react-router-dom，先执行安装命令：

npm install react-router-dom
# 或者
yarn add react-router-dom

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