React应用路由报错：无法解构'basename'，值为null

这个错误的核心原因是你的Navbar组件使用了react-router-dom中依赖路由上下文的API（比如<Link>、useNavigate、useLocation等），但它被放在了<BrowserRouter>的外部，导致无法获取到路由上下文，进而抛出解构null的错误。

解决方案一：将Navbar移入BrowserRouter内部 #

修改App组件代码，把Navbar放到<BrowserRouter>包裹的范围内：

import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Pages/Home/Home";
import Contact from "./Pages/Contact/Contact";
import About from "./Pages/About/About";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} exact />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

解决方案二：在根入口处包裹BrowserRouter（适用于Navbar必须在App组件外层的场景） #

如果你的布局需求要求Navbar在App组件的外层，可以将<BrowserRouter>移到index.js中包裹整个App：

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

对应的App.js代码（移除内部的BrowserRouter）：

import "./App.css";
import Navbar from "./components/Navbar";
import { Routes, Route } from "react-router-dom";

import Home from "./Pages/Home/Home";
import Contact from "./Pages/Contact/Contact";
import About from "./Pages/About/About";

function App() {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} exact />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

关键原理 #

react-router-dom的所有路由相关组件和钩子都依赖Router提供的上下文环境来工作，只有在<BrowserRouter>（或其他Router组件）的包裹范围内，这些API才能获取到有效的路由上下文（包含basename、路由状态等信息）。一旦在Router外部使用这些API，上下文会返回null，就会触发你遇到的解构错误。

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