React应用获取URL参数时报this.props.match未定义TypeError如何解决

• 你使用的是React Router v6版本，该版本废弃了v5中默认注入给类组件的match属性，你代码中使用的this.props.match.params在v6环境下无法正常取值。你看到的this.context.params报错是v6内部路由上下文调用逻辑抛出的，由于你没有完成类组件的路由上下文适配，所以读取参数时直接返回undefined。
• 你的路由配置大概率没有定义参数占位符，如果你要解析路径中的pseudo参数，路由路径必须配置为/pseudo/:pseudo，没有占位符的情况下路由无法提取对应参数。

方案1：改为函数组件（官方推荐） #

React Router v6优先支持Hook API，将类组件改为函数组件后直接调用useParams Hook即可获取路由参数：

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

function 你的组件名() {
  // 直接获取路由参数
  const { pseudo } = useParams();
  const [state, setState] = useState({
    messages: {},
    pseudo: pseudo
  });

  // 原跳转逻辑保持不变即可
  const 跳转触发逻辑 = () => {
    return <Navigate push to={`/pseudo/${state.pseudo}`}/>
  }

  // 其余组件逻辑
}

同时确保你的路由配置参数占位符正确：

<Route path="/pseudo/:pseudo" element={<你的组件名 />} />

方案2：保留类组件，自定义withRouter高阶组件适配 #

如果不想改原有类组件结构，可以自行实现v6版本的withRouter高阶组件注入路由参数：

1. 先实现高阶组件工具：

// withRouter.js
import { useParams, useLocation, useNavigate } from 'react-router-dom';

export default function withRouter(Component) {
  return function WrappedComponent(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} router={{ location, navigate, params }} />
  }
}

2. 改造你的类组件：

import withRouter from './withRouter';

class 你的组件名 extends React.Component {
  state = {
    messages : {},
    // 从注入的router属性取参数
    pseudo : this.props.router.params.pseudo
  }

  // 其余原有逻辑保持不变
}

// 导出时用高阶组件包裹
export default withRouter(你的组件名);

3. 同样确认路由配置的路径占位符正确即可。

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