使用react-router-dom触发Invalid Hook Error，是否存在重复React版本？

使用react-router-dom导入Router、Route等组件时触发Invalid Hook Error，此前用styled-components遇到过相同错误，通过重装并强制修复解决，但该方法对当前问题无效。怀疑是否存在重复版本的React？

附上项目package.json配置：

{
  "name": "my-portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^2.1.3",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

另有npm包列表截图可辅助排查版本冲突。

1. 检查重复React版本 #

在项目根目录执行以下命令，查看是否存在多版本React：

npm ls react

若输出显示不同路径下的多个React实例，说明存在重复安装。

2. 清理依赖并重装 #

• 删除依赖文件夹和锁文件：

rm -rf node_modules package-lock.json

• 重新安装依赖：

npm install

3. 修复react-scripts版本兼容问题 #

当前react-scripts版本为2.1.3，仅支持React 16及以下，但你使用的是React 18.2.0，版本严重不兼容。升级到适配React 18的最新版本：

npm install react-scripts@latest

若出现版本冲突，可添加--force参数强制安装。

4. 规范react-router-dom的安装与使用 #

确保已正确安装依赖：

npm install react-router-dom

注意React Router v6的语法变更，需用<BrowserRouter>包裹路由，用<Routes>替代旧版<Switch>，示例代码：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

5. 强制统一React版本 #

若仍存在多版本问题，在package.json中添加resolutions字段（需npm v7+或yarn支持），强制所有依赖使用同一版本的React：

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

添加后执行npm install生效。

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