报错内容: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
导致报错的原因有很多种,比如:
- React 版本冲突: 确保你没有在项目中安装了多个 React 的版本。
- Hooks 使用位置: 确保所有的 Hooks 只在函数组件或自定义 Hooks 内部调用。
- 组件命名和导入: 确保组件和 Hook 的命名和导入是正确的,没有重复导入或错误导入。
大部分时候,都是因为使用了多个版本的react导致的报错,我们可以使用npm list react来检查我们的项目中是否包含了多个版本的react。
解决方法:只使用一个版本的react进行代码的编译,比如项目中同时使用了react-router-v5和react-router-v6的两种代码写法,首先在package.json文件中找到我们安装的react-router版本信息,如何再将我们的代码统一写成已安装的版本的格式