React使用useParams创建动态URL出现无效Hook调用错误如何解决

核心原因 #

你当前使用的React、React DOM版本为16.6.3，Hook是React 16.8.0才正式推出的官方特性，低于该版本的环境完全不支持Hook调用，你代码中使用的useState、useParams都属于Hook范畴，这是触发报错的直接原因。

解决步骤 #

• 第一步：升级React及相关依赖版本
  如果使用CDN引入资源，将React、React DOM的CDN资源替换为16.8.0及以上的稳定版本即可；如果使用npm/yarn管理依赖，执行以下命令升级：

  npm install react@latest react-dom@latest react-router-dom@latest
  

• 第二步：校验Hook使用规则
  你当前Idea组件内的Hook调用符合官方规则，均在函数组件顶层执行，未放在条件判断、循环、普通工具函数内部，该部分无需调整。
• 第三步：排查多份React副本问题
  若升级版本后仍存在报错，执行npm ls react命令查看项目内是否存在多个版本的React依赖，统一所有React相关依赖的版本号即可解决。

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