React Router ^5.2中TypeError: Cannot read property 'params' of undefined问题解决求助

嘿，我来帮你搞定这个报错！你遇到的这个问题，核心原因是你的组件没有接收到match这个路由相关的props，导致你解构的时候拿到的是undefined，自然访问match.params就会报错。下面给你几种针对性的解决办法：

错误原因拆解 #

在React Router 5里，只有直接被<Route>组件渲染的组件（比如<Route path="/project/:id" component={你的详情组件} />）才会自动获得match、location、history这些路由专属props。如果你的详情组件是嵌套在其他组件里、或者没通过withRouter高阶组件包裹，那这些props就不会被自动传入，match自然就是undefined了。

具体解决方法 #

方法1：确保组件被Route正确渲染 #

如果你的详情组件是直接作为路由的component属性值，那没问题，路由会自动把match等props传进去：

// 路由配置示例
<Route path="/project/:id" component={ProjectDetail} />

但如果你用的是render属性来渲染组件，一定要手动把路由props传递给组件：

<Route path="/project/:id" render={(props) => <ProjectDetail {...props} />} />

方法2：用withRouter高阶组件包裹组件 #

如果你的详情组件不是直接被Route渲染的（比如是作为子组件被其他组件调用），那最稳妥的方式就是用withRouter把组件包裹起来，这样不管组件在哪渲染，都能拿到路由相关props：

1. 先导入withRouter：

import { withRouter } from 'react-router-dom';

2. 导出组件时用withRouter包裹：

export default withRouter(ProjectDetail);

3. 之后在constructor里就能正常使用match了，记得把props传给super（这能确保constructor里也能通过this.props访问路由props）：

constructor(props) { 
  super(props); 
  this.state={ 
    ProjectPassedID: props.match.params.id, 
  } 
}

方法3：改用函数组件+useParams钩子（推荐） #

如果你的组件可以改成函数组件，React Router 5也支持useParams钩子，用起来更简洁，不需要处理props传递的问题：

import { useParams } from 'react-router-dom';

function ProjectDetail() {
  // 直接解构出id参数
  const { id } = useParams();
  
  return <div>当前项目ID：{id}</div>;
}

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