react-router v5调用history.push传参报TypeScript类型不匹配错误如何解决？

react-router v5 的 history.push 方法接收的 location 对象，自定义状态参数必须放在专属的 state 字段内，不允许直接平铺到 location 对象的根层级。你虽然已经给 RouteComponentProps 传入了自定义的 LocationState 泛型，但这个泛型约束的是 state 字段的类型，并不会给 location 根对象扩展额外属性，你直接把 item 写在和 pathname 同级的位置，属于 PartialPath 类型未定义的属性，因此触发了类型不兼容报错。

调整 history.push 的传参结构，把自定义的 item 放到 state 字段内即可：

history.push({
  pathname: `/orders/${orderId}/items/${row.id}`,
  state: {
    item: row
  }
});

修改后你在目标路由页面可以直接通过 location.state.item 拿到类型为 Item 的数据，完全匹配你之前定义的 LocationState 类型约束，不会再触发类型报错。

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