React报错TypeError: Cannot read property 'params' of undefined如何解决

TypeError: Cannot read property 'params' of undefined 本质是当前接收ID的组件的 this.props.match 为 undefined，说明该组件没有被 React Router 注入路由相关属性。

• 方法1：核对路由配置（适配React Router v5）
  确保路由定义中对应路径加了参数占位符，且组件是通过Route的官方属性渲染：

import { Route } from 'react-router-dom'
import PostDetail from './你的组件文件路径'

// 路径里的:id 对应你要取的params.id
<Route path="/buyer/viewpostdetails/:id" component={PostDetail} />

如果用render属性渲染组件，必须透传路由props：

<Route 
  path="/buyer/viewpostdetails/:id" 
  render={(routeProps) => <PostDetail {...routeProps} />} 
/>

• 方法2：用withRouter高阶组件注入路由属性
  如果组件不是Route直接渲染的子组件，比如嵌套在其他业务组件内部，用withRouter包裹后导出即可拿到match属性：

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

class PostDetail extends React.Component {
  componentDidMount(){
    const id = this.props.match.params.id;
    axios.get(`/post/${id}`).then((res) => {
      if (res.data.success) {
        this.setState({
          post:res.data.post
        });
      }
    });
  }
  // 其他组件逻辑
}

// 导出时用withRouter包裹
export default withRouter(PostDetail)

• 方法3：适配React Router v6版本
  如果是v6版本，类组件默认不支持直接获取路由参数，推荐改写为函数组件使用useParams钩子：

import { useParams, useEffect, useState } from 'react-router-dom'

const PostDetail = () => {
  const { id } = useParams()
  const [post, setPost] = useState({})

  useEffect(() => {
    axios.get(`/post/${id}`).then((res) => {
      if (res.data.success) {
        setPost(res.data.post)
      }
    })
  }, [id])

  // 原有组件渲染逻辑
}

当前用原生a标签跳转会触发页面全量刷新，推荐替换为React Router提供的Link组件，实现单页应用无刷新跳转：

import { Link } from 'react-router-dom'

<Link className="btn btn-view" to={`/buyer/viewpostdetails/${posts._id}`}>
  View Post <i className="fas fa-angle-double-right"></i>
</Link>

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