React项目出现dispatcher is null错误，请求技术帮助

• 你安装的是react-router-dom v6，但代码完全采用v5的写法，两者API不兼容，这是触发「dispatcher is null」错误的核心原因。
• v6中移除了Route的component属性，改用element传递组件；同时所有Route必须包裹在Routes组件内；旧的路由结构会导致Navbar中的Link无法获取有效路由上下文，进而引发dispatcher错误。

1. 重构App.js的路由结构 #

将v5写法改为v6标准写法，添加Routes包裹Route，并使用element属性传入组件：

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component.js"

function App() {
  return (
    <Router>
      <Navbar />      
      <br/>
      <Routes>
        <Route path="/" exact element={<ExercisesList />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 处理Bootstrap样式（可选但建议） #

你的Navbar使用了Bootstrap类名，但未安装依赖，可通过以下命令安装：

npm install bootstrap

安装后在src/index.js中导入样式文件：

import 'bootstrap/dist/css/bootstrap.min.css';

3. 清理冗余依赖 #

package.json中同时存在react-router和react-router-dom，v6版本中react-router-dom已包含核心路由功能，可卸载冗余包：

npm uninstall react-router

4. 扩展路由（后续功能适配） #

如果要实现/create和/user路由，同样遵循v6规范添加：

// 先导入对应组件
import CreateExerciseLog from "./components/create-exercise.component"
import CreateUser from "./components/create-user.component"

// 在Routes内添加路由
<Route path="/create" element={<CreateExerciseLog />} />
<Route path="/user" element={<CreateUser />} />

「dispatcher is null」错误本质是组件无法获取有效路由上下文——旧的v5路由结构无法被v6的Router正确解析，导致Navbar中的Link失去路由上下文关联。按照v6规范重构后，上下文传递恢复正常，错误即可解决。

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