React接入React Router报dispatcher is null及无效Hook调用错误

你遇到的Invalid hook call警告和Uncaught TypeError: dispatcher is null错误，按以下优先级排查修复即可：

1. 修正路由组件导入路径 #

这是你代码里最明显的问题，会直接触发该报错：
Layout.js中你从react-router导入路由组件的写法是错误的：

// 错误写法
import { Route, Routes, Outlet } from "react-router";

React Router v6 中，Routes、Route这类面向Web端DOM渲染的路由组件，必须从react-router-dom包导入。react-router是路由核心逻辑包，不包含Web端渲染的上下文绑定，直接从这个包导入组件使用，会因为无法获取正确的React上下文触发Hooks调用非法的错误。
将该行导入修改为：

// 正确写法
import { Route, Routes, Outlet } from "react-router-dom";

修改完成后，删除项目下的node_modules文件夹和依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令，重启开发服务即可，绝大多数场景下该问题会直接修复。

2. 排查多副本React问题 #

如果修正导入后报错仍存在，执行以下命令检查项目中是否存在多份React实例：

npm ls react

如果输出结果显示存在多个版本的React副本（多为依赖嵌套安装导致），在package.json中添加配置强制全项目使用统一版本的React即可：

• 使用npm的场景添加overrides字段：

"overrides": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

• 使用yarn的场景添加resolutions字段：

"resolutions": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

添加完成后重新安装依赖即可。

3. 版本匹配校验 #

从你提供的package.json依赖版本看，react@18.2.0、react-dom@18.2.0、react-router-dom@6.3.0本身是完全兼容的，不存在版本不匹配问题，这一步通常无需额外处理。后续如果升级依赖，只要保证react和react-dom的版本号完全一致即可。

额外路由配置提示 #

你当前代码中path="trade"是相对路径写法，会继承父级路由路径，如果你需要它匹配根路径下的/trade地址，需要将路径改为path="/trade"，或者调整为嵌套路由写法。这个问题不会触发当前的Hooks报错，只会导致路由匹配不符合预期，可以后续按需调整。

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