React Router v4中match.props无法传递值的问题求助

作为同样踩过React Router v4坑的开发者，我来帮你梳理下问题所在和解决步骤：

1. 先纠正参数获取的基础错误 #

首先你对match对象的结构理解有误，URL里的动态参数是存在match.params中的，不是match.props。你的NumberHeader组件要改成这样：

function NumberHeader ({match}){ 
  const number = match.params.nr; // 这里改成params！
  // 后续逻辑...
}

2. 嵌套路由必须基于父组件的match.url定义路径 #

你的NumberHeader是在DrawsPage组件内部的路由中渲染的，属于嵌套路由。React Router v4中，嵌套路由的路径必须基于父组件的match.url来拼接，不能直接写绝对路径（除非你明确需要绝对定位）。

首先，确保DrawsPage能自动拿到路由相关的props（match、location等），所以父路由不要用箭头函数返回组件，直接传组件引用：

// 父路由（比如App组件中的路由配置）
<Route path={routes.NUMERO} component={DrawsPage} />

这样DrawsPage不管是类组件还是函数组件，都能接收到路由的props。

然后在DrawsPage内部定义子路由时，用match.url拼接子路径：

// DrawsPage组件内部（类组件示例）
class DrawsPage extends React.Component {
  render() {
    return (
      <div>
        {/* 用父组件的match.url拼接子路由路径，确保嵌套层级正确 */}
        <Route path={`${this.props.match.url}/number/:nr`} component={NumberHeader} />
      </div>
    );
  }
}

这样路由匹配时，NumberHeader会自动接收到包含动态参数的match对象，不需要手动传递。

3. 避免用箭头函数传递路由组件（除非必要） #

你之前的写法：

<Route path={`/number/:nr`} component={() => <NumberHeader match={this.props.match} />} />

有两个核心问题：

• 每次渲染都会创建新的组件实例，导致组件重复卸载/挂载，不仅浪费性能，还会丢失组件状态。
• 你手动传递的是父组件的match，而不是当前子路由匹配后的match，所以里面根本不会包含:nr这个动态参数。

如果确实需要给组件传递额外props，应该用render属性而非component，同时要把路由的props一并传下去：

// 正确的额外传参写法（如果需要的话）
<Route 
  path={`${this.props.match.url}/number/:nr`} 
  render={(routerProps) => <NumberHeader {...routerProps} extraProp="自定义值" />} 
/>

这样NumberHeader既能拿到路由的match、location等props，也能接收你额外传递的参数。

4. 确认路由的嵌套层级结构 #

确保你的路由是嵌套关系：App路由渲染DrawsPage，DrawsPage内部再渲染NumberHeader的路由。不要把所有路由都堆在App根组件里，那样就不是真正的嵌套路由，路径匹配也会出错。

总结一下核心逻辑：嵌套路由用父match.url拼接路径，让子组件自动接收路由props，从match.params中取动态参数，避免不必要的箭头函数传递组件。

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