React项目构建报错：Property 'key'不存在于IntrinsicAttributes & RouteProps类型

问题原因 #

这个报错是因为react-router-dom v6+ 的类型定义不再允许给Route组件传递key属性。你上周没问题，大概率是最近项目依赖升级（比如自动升级了react-router-dom版本），或者之前使用的旧版本类型定义有宽松处理，现在严格校验了。

具体解决方法 #

根据你的代码场景分两种情况处理：

1. 循环渲染多个Route组件 #

如果是通过map等方式动态生成Route列表，不要把key直接传给Route，而是把Route包裹在Fragment（或<>）中，将key放在外层Fragment上：

错误示例：

// 报错代码
routes.map(route => (
  <Route key={route.id} path={route.path} element={route.element} />
))

修正后：

routes.map(route => (
  <React.Fragment key={route.id}>
    <Route path={route.path} element={route.element} />
  </React.Fragment>
))
// 或者用简写形式
routes.map(route => (
  <>
    <Route path={route.path} element={route.element} />
  </>
))

2. 单个Route组件手动添加了key #

如果是给单个Route加了key，直接删除key={key}即可——React Router v6会自动处理路由匹配，单个Route不需要额外设置key。

验证版本（可选） #

可以查看package.json确认react-router-dom的版本：

{
  "dependencies": {
    "react-router-dom": "^6.x.x"
  }
}

如果确实是v6+，按照上面的方法修改代码即可解决类型报错。

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