React Router中this.props.match.params为空但DevTools可见参数的问题排查

嘿，我来帮你搞定这个问题！你遇到的核心问题是没有把React Router提供的路由相关props传递给组件。

你看，在Route的render回调函数里，React Router会自动传入包含match、location、history这些路由信息的props，但你的代码里只把父组件的this.props传给了Single组件，完全没用到render回调里的那个props，所以Single自然拿不到match.params啦。

具体解决方案 #

直接把路由props和父组件props合并传递给组件就行，修改你的Route代码：

<Route path='/single/:id' render={(routerProps) => (<Single {...this.props} {...routerProps}/>)}/>

这样一来，Single组件就能同时拿到父组件的props，以及React Router提供的match对象，之后你在Single里通过this.props.match.params.id就能正常获取到路由参数了。

额外小提示 #

1. 如果你用的是React Router v6版本，写法会有变化（比如用Routes替代Switch，用element属性），但从你代码里的Switch来看，应该是v5版本，上面的方案完全适用。
2. 也可以用component属性来写，效果是一样的：

<Route path='/single/:id' component={(props) => <Single {...this.props} {...props} />} />

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