使用React Router实现导航栏时出现'dispatcher is null'错误

一、修复依赖缺失问题 #

你提到已安装react-router-dom但它未出现在package.json的依赖列表中，这是核心问题之一。执行以下命令重新安装并确保依赖被正确添加：

npm install react-router-dom --save
# 或使用yarn
yarn add react-router-dom

执行后检查package.json，确认react-router-dom已出现在dependencies中。

二、修正Router上下文层级错误 #

当前代码中，使用<Link>的NavBar组件位于<BrowserRouter>上下文之外，这会导致导航组件无法获取路由上下文，进而触发"dispatcher is null"错误。需要将<BrowserRouter>提升到App组件的最外层，包裹所有需要路由上下文的组件：

修改App.js：

import "./App.css";
import { Header } from "./Components/Header/Header";
import { AppRoutes } from "./routes";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <AppRoutes />
      </div>
    </BrowserRouter>
  );
}

export default App;

同时修改routes.js，移除内部的<BrowserRouter>（避免重复嵌套）：

import { Routes, Route } from "react-router-dom";

const Home = () => <h2>Home</h2>;
const News = () => <h2>News</h2>;
const WarehouseFinds = () => <h2>WarehouseFinds</h2>;
const Genres = () => <h2>Genres</h2>;
const Releases = () => <h2>Releases</h2>;
const EquipmentAndMore = () => <h2>Equipment & More</h2>;

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/news" element={<News />} />
      <Route path="/warehouse-finds" element={<WarehouseFinds />} />
      <Route path="/genres" element={<Genres />} />
      <Route path="/releases" element={<Releases />} />
      <Route path="/equipment" element={<EquipmentAndMore />} />
    </Routes>
  );
};

三、纠正Route的element属性用法 #

你尝试将<Route path="/" element={<Home />} />改为<Route path="/" element={Home} />是错误的：element属性要求传入React元素（组件实例，带<>），而非组件本身。需保持原写法<Home />。

四、验证修复 #

1. 执行npm install确保依赖完全安装
2. 重启开发服务器（依赖更新后需重启生效）
3. 测试导航链接，确认页面跳转正常，刷新不再触发错误

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