求助：react-router-dom v6中Cannot read 'params' of undefined错误解决

这个错误的核心原因是你沿用了react-router-dom v5的写法，但v6已经不再通过组件props传递match和history对象，导致你解构出来的match为undefined，进而无法读取match.params.token。以下是具体修复步骤：

1. 导入v6专属路由钩子 #

在ResetPassword.js顶部新增导入useParams（获取路由参数）和useNavigate（页面跳转）：

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

2. 替换props为钩子调用 #

移除组件参数中的{ history, match }，改用钩子获取参数和导航能力：

const ResetPassword = () => {
  const dispatch = useDispatch();
  const alert = useAlert();
  const params = useParams(); // 获取路由参数
  const navigate = useNavigate(); // 替代history实现页面跳转
  // ... 其余代码不变
};

3. 修改token获取方式 #

在resetPasswordSubmit函数中，把match.params.token替换为params.token：

dispatch(resetPassword(params.token, passwords));

4. 替换页面跳转逻辑 #

在useEffect里，把history.push("/login")改成navigate("/login")：

if (success) {
  alert.success("Password Updated Successfully");
  navigate("/login");
}

额外优化：适配后端JSON格式 #

你的后端代码预期接收JSON格式参数，但原代码用了FormData，建议换成普通对象传递参数，避免格式不匹配问题：

const resetPasswordSubmit = (e) => {
  e.preventDefault();
  const passwords = {
    password: password,
    confirmPassword: confirmPassword
  };
  dispatch(resetPassword(params.token, passwords));
};

修改后的完整代码 #

import React, { Fragment, useState, useEffect } from "react";
import "./ResetPassword.css";
import Loader from "../layout/Loader/Loader";
import { useDispatch, useSelector } from "react-redux";
import { clearErrors, resetPassword } from "../../actions/userAction";
import { useAlert } from "react-alert";
import MetaData from "../layout/MetaData";
import LockOpenIcon from "@material-ui/icons/LockOpen";
import LockIcon from "@material-ui/icons/Lock";
import { useParams, useNavigate } from "react-router-dom";

const ResetPassword = () => {
  const dispatch = useDispatch();
  const alert = useAlert();
  const params = useParams();
  const navigate = useNavigate();

  const { error, success, loading } = useSelector(
    (state) => state.forgotPassword
  );

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const resetPasswordSubmit = (e) => {
    e.preventDefault();

    const passwords = {
      password: password,
      confirmPassword: confirmPassword
    };

    dispatch(resetPassword(params.token, passwords));
  };

  useEffect(() => {
    if (error) {
      alert.error(error);
      dispatch(clearErrors());
    }

    if (success) {
      alert.success("Password Updated Successfully");
      navigate("/login");
    }
  }, [dispatch, error, alert, navigate, success]);

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <MetaData title="Change Password" />
          <div className="resetPasswordContainer">
            <div className="resetPasswordBox">
              <h2 className="resetPasswordHeading">Update Password</h2>

              <form
                className="resetPasswordForm"
                onSubmit={resetPasswordSubmit}
              >
                <div>
                  <LockOpenIcon />
                  <input
                    type="password"
                    placeholder="New Password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <div className="loginPassword">
                  <LockIcon />
                  <input
                    type="password"
                    placeholder="Confirm Password"
                    required
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                  />
                </div>
                <input
                  type="submit"
                  value="Update"
                  className="resetPasswordBtn"
                />
              </form>
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

export default ResetPassword;

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