React Router DOM抛出Invalid hook call错误如何排查解决？

问题描述 #

按照React Router官方文档编写代码后，抛出如下警告：

警告： Invalid hook call。Hooks只能在函数组件的主体内部调用，触发该错误的可能原因如下：

1. React与渲染器（例如React DOM）版本不匹配
2. 代码编写违反了Hooks的调用规则
3. 同一个应用中存在多份React副本

问题对应app.js代码：

import { BrowserRouter, Route, Routes } from "react-router-dom";
function App() {
    return (
    <BrowserRouter>
    <Routes>
     <Route path="/" element={<div>Home page</div>} />
     <Route path="/about" element={<div>aBout page</div>} />
    </Routes>
   </BrowserRouter>
    );
}

export default App;

报错截图

排查解决步骤 #

上述App组件写法符合React Router v6语法规范，不存在Hooks调用违规问题，故障来自依赖或项目配置，按以下顺序排查：

• 校验版本匹配性
  React Router v6要求React版本≥16.8，先执行命令查看本地已安装的依赖版本：

  npm ls react react-dom react-router-dom
  

  如果React、React DOM版本低于16.8，直接升级到对应兼容版本：

  npm install react@^18 react-dom@^18
  

• 清理重复React副本
  如果npm ls react返回结果中存在多份不同版本的React实例，先删除依赖缓存和锁文件后重新安装：

  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  npm install
  

  若重装后仍存在重复React问题，在构建配置中添加别名强制所有依赖引用同一份React实例：
  Webpack配置示例：

  // webpack.config.js
  const path = require('path')
  module.exports = {
    resolve: {
      alias: {
       'react': path.resolve(__dirname, 'node_modules/react'),
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
      }
    }
  }
  

  Vite配置示例：

  // vite.config.js
  import { defineConfig } from 'vite'
  import path from 'path'
  export default defineConfig({
    resolve: {
      alias: {
       'react': path.resolve(__dirname, 'node_modules/react'),
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
      }
    }
  })
  

• 检查入口文件挂载逻辑
  确认项目入口文件使用正确的ReactDOM API挂载根组件，React 18标准写法如下：

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

  禁止在类组件、普通JS工具函数中调用Router相关组件或React Hooks。
• 重装react-router-dom
  如果安装过程中出现文件损坏、丢包问题，卸载后重新安装即可：

  npm uninstall react-router-dom
  npm install react-router-dom
  

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