React JS 如何获取URL参数 解决match.params未定义报错问题

报错根因 #

这个报错Cannot read property 'params' of undefined的本质是组件内的this.props.match不存在，核心问题有两个：

• 路由配置没有通过<Route>组件匹配路径，react-router 不会给未被Route包裹的组件注入match、location这类路由属性
• 组件内的参数解构语法逻辑错误

第一步：修正App.js的路由配置 #

原写法直接把ResetPassword放在<Router>下，没有路径匹配逻辑，组件自然收不到路由相关的props。
首先确保从react-router-dom导入所需模块，修改后的代码：

// App.js 顶部导入
import { BrowserRouter as Router, Route } from "react-router-dom";
import ResetPassword from "./ResetPassword";

render() {
  return (
    <Router>
      {/* 用Route匹配指定路径，自动向组件注入路由props */}
      <Route path="/reset-password/:token" component={ResetPassword} />
    </Router>
  )
}

修改后，当访问/reset-password/任意token值时，ResetPassword组件会自动接收到携带参数的match属性。

第二步：修正ResetPassword的参数取值逻辑 #

原代码里的解构写法错误：

// 错误：从字符串上做对象解构
const { token } = this.props.match.params.token;

URL的路径参数都存放在this.props.match.params这个对象里，正确的取值方式是：

componentDidMount() {
  // 从params对象里解构取出token
  const { token } = this.props.match.params;
  console.log(token);
}

如果担心偶发的props未加载完成的问题，可以加可选链做兼容：

const token = this.props?.match?.params?.token;

补充：React Router v6版本适配 #

如果你安装的是最新版的react-router-dom v6，类组件不再自动接收match相关的props，推荐直接把组件改成函数组件，用useParams Hook获取参数：

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

export default function ResetPassword() {
  // 直接拿到所有URL路径参数
  const { token } = useParams();

  useEffect(() => {
    console.log("重置密码token：", token);
  }, [token]);

  return (
    <div className="resetPassword">
      <div className="change__container">
        <form>
          <h1 id="changePassword__message"></h1>
          <input
            type="password"
            name="password"
            placeholder="password"
            className="change__textInput"
            required
          />
          <input
            type="password"
            name="passwordTwo"
            placeholder="confirm password"
            className="change__textInput"
            required
          />
          <input type="submit" value="Submit" className="change__btnInput btn" required />
        </form>
      </div>
    </div>
  )
}

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