使用 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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 引入，对照另外一个项目的依赖库信息，发现报错的项目中只安装了 react-router@6.3.0 没有安装 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 开头）复制了一下，大家可以对照一下，如果有什么库缺失了可以安装试试看：
react-dom@18.2.0
│ ├─ loose-envify@^1.1.0
│ └─ scheduler@^0.23.0
├─ react-error-overlay@6.0.11
├─ react-is@16.13.1
├─ react-refresh@0.11.0
├─ react-router-dom@6.3.0
│ ├─ history@^5.2.0
│ └─ react-router@6.3.0
├─ react-router@6.3.0
│ └─ history@^5.2.0
├─ react-scripts@5.0.1
│ ├─ @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
│ ├─ fs-extra@10.1.0
│ │ ├─ 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
│ ├─ semver@7.3.7
│ │ └─ 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
├─ react@18.2.0
│ └─ loose-envify@^1.1.0