react-router-dom v5环境类型定义引用v6导致exact属性报错如何解决

问题原因 #

该报错本质是类型定义版本不匹配导致的：你实际安装的react-router-dom是v5版本，但TypeScript编译时读取到了v6版本的@types/react-router-dom类型定义，v6已经移除了exact、component等v5支持的Route属性，因此触发类型校验失败。
即使你本地查询到的@types/react-router-dom版本是v5，也大概率是依赖树中其他包间接引入了v6版本的类型定义，被TS优先读取了。

解决方案 #

按以下步骤操作即可解决：

1. 先清理本地的依赖缓存和锁文件

   # npm 用户执行
   rm -rf node_modules package-lock.json
   # yarn 用户执行
   rm -rf node_modules yarn.lock
   # pnpm 用户执行
   rm -rf node_modules pnpm-lock.yaml
   

2. 在package.json中添加版本锁定配置，强制所有依赖的react-router-dom相关类型包都使用v5版本
   • 如果使用yarn，新增resolutions字段：

   {
     "resolutions": {
       "@types/react-router-dom": "5.3.2",
       "@types/react-router": "5.1.20"
     }
   }
   

   • 如果使用npm≥8.3，新增overrides字段：

   {
     "overrides": {
       "@types/react-router-dom": "5.3.2",
       "@types/react-router": "5.1.20"
     }
   }
   

   • 如果使用pnpm，新增pnpm.overrides字段：

   {
     "pnpm": {
       "overrides": {
         "@types/react-router-dom": "5.3.2",
         "@types/react-router": "5.1.20"
       }
     }
   }
   

3. 重新安装依赖

   # npm 用户
   npm install
   # yarn 用户
   yarn install
   # pnpm 用户
   pnpm install
   

4. 可选临时应急方案
   如果需要临时跳过校验快速运行项目，可以在报错的Route代码行上方添加注释// @ts-ignore，强制跳过该行的类型校验，不推荐长期使用。

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