React Router 中 url 参数的 TypeScript 输入答案

【问题标题】：TypeScript typing of url params in React RouterReact Router 中 url 参数的 TypeScript 输入
【发布时间】：2021-08-27 07:52:45
【问题描述】：

我尝试输入 url 参数，但得到错误“type {} is missing the following properties from type RouteComponentsProps: history, location, match 如何在 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
}

【问题讨论】：

【解决方案1】：

当你如下渲染你的组件时

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

DetailsPage 没有得到 react router 提供的 route props。

所以你需要将你的路线渲染为

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

或

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

【讨论】：

是的，它的作品，但它的风格像旧版本的 react 路由器，在新的 V5 中你可以将组件作为一个孩子传递。有一个钩子 useParams 可以正常工作，但我想知道我是否可以在没有钩子的情况下做到这一点，只是为了正确理解发生了什么
这是来自 react-router-dom 的 Route 组件的源代码，如果你看到 L62 - github.com/remix-run/react-router/blob/main/packages/… 。当你的孩子不是一个函数时，你只是在渲染孩子，而不是向它传递任何额外的道具。