React Router中TypeScript定义URL参数出现属性缺失错误如何解决

报错原因 #

直接将组件作为<Route>的子元素时，React Router 不会自动注入history、location、match三个路由属性到组件props中。你的组件声明了接收RouteComponentProps类型的参数，TS检测到实际传入的props为空对象，缺少对应属性因此触发报错。 #

解决方案 #

如果你使用 React Router v5 #

以下两种写法任选其一即可：

• 使用component属性指定路由组件，框架会自动注入路由属性

<Route exact path="/page/:id" component={DetailsPage} />

• 使用render属性渲染组件，手动透传路由属性

<Route 
  exact 
  path="/page/:id"
  render={(routeProps: RouteComponentProps<MatchParams>) => <DetailsPage {...routeProps} />}
/>

如果你使用 React Router v6（当前主流版本） #

v6已经移除了RouteComponentProps，也不再支持component和render属性，推荐使用官方提供的Hooks获取路由参数，类型定义更简洁：

1. 路由配置修改为标准v6写法：

<Route exact path="/page/:id" element={<DetailsPage />} />

2. 组件内用useParams Hook获取带类型的URL参数：

import { useParams } from 'react-router-dom';

interface MatchParams {
  id: string
}

const DetailsPage = () => {
  const { id } = useParams<MatchParams>();
  // 其他业务逻辑
}

如果需要获取原history、location对象，可分别使用useNavigate、useLocation Hook即可。

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