错误信息
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。