React+TS使用React Router给路由子组件传props报错如何解决？

错误原因 #

1. 你使用的是React Router v5版本的Route组件，component属性仅支持传入组件本身，不支持在Route标签上直接挂载自定义props，Route的TS类型定义中没有userAuth、setUser这类自定义字段，因此直接抛出类型不匹配错误。
2. 你在Route上传递的修改状态方法名为setUser，但Login组件声明接收的props名为setUserAuth，二者命名不匹配，即使路由传参成功也会出现props undefined的问题。

修复方案 #

推荐使用render属性替代component属性传递自定义参数，修改App.tsx中Login路由的写法即可：

// 修改前
<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUser={setUserAuth} />

// 修改后
<Route 
  path={ROUTES.LOGIN} 
  render={(routeProps) => <Login {...routeProps} userAuth={userAuth} setUserAuth={setUserAuth} />} 
/>

上述写法中render回调的routeProps包含了路由默认注入的match、location、history等属性，通过扩展运算符传入组件即可保留原有路由能力，同时自定义的userAuth、setUserAuth也可以正常传入组件。

如果不需要保留路由默认props，也可以直接把组件写在Route的子节点位置：

<Route path={ROUTES.LOGIN}>
  <Login userAuth={userAuth} setUserAuth={setUserAuth} />
</Route>

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