在 React Router 中输入 url 参数的 TypeScript

Question

我尝试输入 url 参数，但出现错误“类型 {} 缺少类型 RouteComponentsProps 中的以下属性：历史、位置、匹配如何在 TS 中正确输入 url 参数。

<Route exact path="/page/:id">
  <DetailsPage  /> ----> error here 
</Route>

interface MatchParams {
  id:string
}

const DetailsPage = (props: RouteComponentProps<MatchParams>) => {
 const {id} = props.match.params
}

Answer 1

当您如下渲染组件时

<Route exact path="/page/:id">
  <DetailsPage  /> ----> error here 
</Route>

DetailsPage 未获取 React 路由器提供的路由道具。

因此您需要将路线呈现为

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

或

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

TypeScript typing of url params in React Router