React Router路由实现报错：dispatcher is null及无效Hook调用

问题描述 #

在React应用中配置React Router路由时，触发「Invalid hook call」警告，同时出现「dispatcher is null」错误。警告提示Hook仅能在函数组件内部调用，可能诱因包括：React与渲染器（如React DOM）版本不匹配、违反Hook使用规则、应用存在多份React副本。

报错栈信息：

dispatcher is null
useRef@http://localhost:3000/static/js/bundle.js:9298:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:5616:55
renderWithHooks@http://localhost:3000/static/js/bundle.js:30071:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:33357:17
beginWork@http://localhost:3000/static/js/bundle.js:34653:20
callCallback@http://localhost:3000/static/js/bundle.js:19663:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:19707:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:19764:35
beginWork$1@http://localhost:3000/static/js/bundle.js:39638:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:38885:16
workLoopSync@http://localhost:3000/static/js/bundle.js:38808:26
renderRootSync@http://localhost:3000/static/js/bundle.js:38781:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:38175:78
workLoop@http://localhost:3000/static/js/bundle.js:46202:46
flushWork@http://localhost:3000/static/js/bundle.js:46180:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:46417:25

问题根源 #

经排查，导致错误的两个核心原因：

• 嵌套使用BrowserRouter：index.js与App.js中同时包裹了<BrowserRouter>，违反路由上下文的单一性原则，引发Hook调用异常。
• 未安装react-router-dom依赖：package.json的依赖列表中缺少react-router-dom，但代码中却导入并使用了其组件，导致运行时资源缺失。

解决方案 #

1. 安装react-router-dom依赖 #

在项目根目录执行以下命令安装依赖：

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

2. 移除嵌套的BrowserRouter #

仅保留一处<BrowserRouter>作为路由根容器，推荐保留index.js中的配置，修改App.js移除多余的<BrowserRouter>。

修改后的index.js：

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

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

reportWebVitals();

修改后的App.js：

import logo from './logo.svg';
import './App.css';
import ListUsersComponent from './components/ListUsersComponent';
import HeaderComponent from './components/HeaderComponent';
import FooterComponent from './components/FooterComponent';
import { Route, Routes } from 'react-router-dom'; // 移除BrowserRouter导入

function App() {
  return (
    <div className='container'>
      <HeaderComponent />
      <div className="container">
        <Routes>
          <Route path='/' element={<ListUsersComponent />} />
          <Route path='/admin' element={<ListUsersComponent />} />
        </Routes>
      </div>
      <FooterComponent />
    </div>
  );
}

export default App;

修改后的package.json（依赖部分）：

{
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0", // 新增的依赖
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  }
}

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