使用 BrowserRouter 报错 invaild hook call 解决方案

错误信息

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This Could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-h… for tips about how to debug and fix this problem.

解决方法

排错发现，只要引入 browserRouter 就会报错。

使用 yarn list / npm ls 查看项目的 node_modules 引入，对照另外一个项目的依赖库信息，发现报错的项目中只安装了 [email protected] 没有安装 react-router-dom。

于是 yarn add react-router-dom / npm i react-router-dom，问题解决。

补充

如果有遇到这个问题的小伙伴，可以试试先卸载 react-router-dom 和 react-router，然后再重新安装。
yarn 的操作：
yarn remove react-router-dom
yarn remove react-router
yarn add react-router-dom
npm 的操作：
npm uninstall react-router-dom
npm uninstall react-router
npm install react-router-dom@6

将自己的项目中的依赖信息（react 开头）复制了一下，大家可以对照一下，如果有什么库缺失了可以安装试试看：

[email protected]
│ ├─ loose-envify@^1.1.0
│ └─ scheduler@^0.23.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ history@^5.2.0
│ └─ [email protected]
├─ [email protected]
│ └─ history@^5.2.0
├─ [email protected]
│ ├─ @babel/core@^7.16.0
│ ├─ @pmmmwh/react-refresh-webpack-plugin@^0.5.3
│ ├─ @svgr/webpack@^5.5.0
│ ├─ babel-jest@^27.4.2
│ ├─ babel-loader@^8.2.3
│ ├─ babel-plugin-named-asset-import@^0.3.8
│ ├─ babel-preset-react-app@^10.0.1
│ ├─ bfj@^7.0.2
│ ├─ browserslist@^4.18.1
│ ├─ camelcase@^6.2.1
│ ├─ case-sensitive-paths-webpack-plugin@^2.4.0
│ ├─ css-loader@^6.5.1
│ ├─ css-minimizer-webpack-plugin@^3.2.0
│ ├─ dotenv-expand@^5.1.0
│ ├─ dotenv@^10.0.0
│ ├─ eslint-config-react-app@^7.0.1
│ ├─ eslint-webpack-plugin@^3.1.1
│ ├─ eslint@^8.3.0
│ ├─ file-loader@^6.2.0
│ ├─ fs-extra@^10.0.0
│ ├─ [email protected]
│ │ ├─ graceful-fs@^4.2.0
│ │ ├─ jsonfile@^6.0.1
│ │ └─ universalify@^2.0.0
│ ├─ fsevents@^2.3.2
│ ├─ html-webpack-plugin@^5.5.0
│ ├─ identity-obj-proxy@^3.0.0
│ ├─ jest-resolve@^27.4.2
│ ├─ jest-watch-typeahead@^1.0.0
│ ├─ jest@^27.4.3
│ ├─ mini-css-extract-plugin@^2.4.5
│ ├─ postcss-flexbugs-fixes@^5.0.2
│ ├─ postcss-loader@^6.2.1
│ ├─ postcss-normalize@^10.0.1
│ ├─ postcss-preset-env@^7.0.1
│ ├─ postcss@^8.4.4
│ ├─ prompts@^2.4.2
│ ├─ react-app-polyfill@^3.0.0
│ ├─ react-dev-utils@^12.0.1
│ ├─ react-refresh@^0.11.0
│ ├─ resolve-url-loader@^4.0.0
│ ├─ resolve@^1.20.0
│ ├─ sass-loader@^12.3.0
│ ├─ semver@^7.3.5
│ ├─ [email protected]
│ │ └─ lru-cache@^6.0.0
│ ├─ source-map-loader@^3.0.0
│ ├─ style-loader@^3.3.1
│ ├─ tailwindcss@^3.0.2
│ ├─ terser-webpack-plugin@^5.2.5
│ ├─ webpack-dev-server@^4.6.0
│ ├─ webpack-manifest-plugin@^4.0.2
│ ├─ webpack@^5.64.4
│ └─ workBox-webpack-plugin@^6.4.1
├─ [email protected]
│ └─ loose-envify@^1.1.0