react-router-dom报错：无法解构'basename'，路由跳转失效求助

DevOps 小满

2026-7-14

React Router 路由功能异常排查与修复

问题现象

使用react-router-dom实现路由时，点击导航按钮（NavBtn组件内的Link）后，目标页面组件未渲染，同时控制台抛出以下错误：

Uncaught TypeError: 无法解构'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)'的'basename'属性，因为它为null。
错误发生在<Link>组件中

错误原因

Link组件依赖BrowserRouter提供的路由上下文才能正常工作，但当前代码中NavBtn组件位于BrowserRouter的包裹范围之外：

App.tsx先渲染NavBtn，再渲染包含BrowserRouter的Router组件，导致NavBtn内的Link无法获取到路由上下文，触发解构basename的空值错误。

修复方案

将BrowserRouter提升到足够高的层级，确保所有使用路由功能的组件（包括NavBtn和路由页面组件）都在其包裹范围内。

修改代码示例

1. 更新`App.tsx`，引入并使用`BrowserRouter`包裹导航和路由组件

import React from 'react';
import { Reset } from "styled-reset";
import { NavBtn } from "./components/nav_btn";
import { Router } from "./router";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Reset />
      <NavBtn />
      <Router />
    </BrowserRouter>
  );
}

export default App;

2. 更新`router.tsx`，移除内部的`BrowserRouter`（避免重复嵌套）

import { Routes, Route } from "react-router-dom";
import { ProductManage } from "./pages/product_manage";
import { ChangeCharge } from "./pages/change_charge";
import { ProductPurchase } from "./pages/product_purchase";

export function Router() {
  return (
    <Routes>
      <Route path='/product-manage' element={<ProductManage />} />
      <Route path='/change-charge' element={<ChangeCharge />} />
      <Route path='/product-purchase' element={<ProductPurchase />} />
    </Routes>
  )
}