React路由中使用<Route render>时useParams无法获取URL参数，使用<Route component>则正常的问题解决诉求

嗨，这个问题我之前也碰到过，其实核心原因很简单：当你使用component属性时，React Router会自动把路由相关的props（比如match、location、history）注入到你的组件中；但换成render属性时，这些路由props不会自动传递，得手动把它们传给你的组件才行。

下面给你几种可行的解决方案：

1. 传递所有路由props（最推荐） #

在render的回调函数里接收路由props，然后用展开运算符{...routeProps}把它们一起传给ABC组件，同时加上你的自定义props：

<Route path="/:param" render={(routeProps) => <ABC type="some prop" {...routeProps} />} />

这样一来，不管你的ABC是函数组件还是类组件，都能正常获取URL参数：

• 函数组件可以直接用useParams() hook拿到参数；
• 类组件可以通过this.props.match.params访问参数。

2. 只传递需要的路由props #

如果你只需要match或者params，可以解构出来单独传递，代码更简洁：

// 只传递match对象
<Route path="/:param" render={({ match }) => <ABC type="some prop" match={match} />} />

// 直接传递params参数
<Route path="/:param" render={({ match: { params } }) => <ABC type="some prop" params={params} />} />

补充：函数组件用hook的特殊情况 #

如果你的ABC是函数组件，其实只要它被Route包裹在路由上下文里，即使不传递路由props，直接调用useParams()也能拿到参数。但保险起见，还是建议传递路由props，这样组件的兼容性更好，比如后续改成类组件也不用改太多代码。

举个完整的函数组件例子：

function ABC({ type }) {
  const params = useParams();
  console.log(params.param); // 能正常输出URL中的param值
  return <div>{type} - {params.param}</div>;
}

// 路由配置
<Route path="/:param" render={() => <ABC type="some prop" />} />

这种写法其实也能生效，因为useParams是通过React Router的Context来获取路由信息的，和是否传递props无关。但如果你的组件不在路由Context范围内（比如被移出了Route的渲染树），那useParams就会失效，所以还是第一种传递所有路由props的方式更稳妥。

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