实践React Routing出现Invalid hook call无效钩子调用报错求助

排查步骤 #

1. 检查版本兼容性 #

• 执行命令查看本地安装的相关包版本：
  npm list react react-dom react-router-dom
• 版本匹配要求：
  • React、React DOM 版本 ≥ 16.8.0
  • 若使用 react-router-dom v6.4+ 版本，建议将 React 升级到 17/18 版本，避免低版本兼容问题

如果你当前用的是 React 18，注意 index.js 的渲染语法已经更新，旧的 ReactDOM.render 写法虽然不会直接触发报错，但建议同步更新为 v18 的标准写法避免潜在兼容问题：

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

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

2. 排查多份React副本问题 #

• 执行命令检查是否存在多版本React：
  npm ls react
• 如果输出结果中出现多个不同版本的React，执行以下操作重置依赖：
  • 删除项目根目录下的 node_modules 文件夹
  • 删除依赖锁定文件：package-lock.json（npm 环境）或 yarn.lock（yarn 环境）
  • 重新执行 npm install 安装所有依赖

3. 最简场景验证 #

• 临时注释App组件中的Routes相关代码，直接返回

  return (<About />)
  

  组件，若此时仍报Hook错误，说明问题和react-router无关，优先排查React本身的安装/配置问题；若不再报错，再恢复路由代码逐步排查。

4. 自建工程额外检查 #

如果你的项目不是通过create-react-app等官方脚手架生成，而是自行配置webpack等构建工具：

• 检查webpack配置中是否错误配置了react的alias，导致引入了多份React
• 检查是否在webpack externals中错误配置了React，导致运行时找不到正确的React实例

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