React.js，如何获取 URL 路径名中的属性？

Question

我正在尝试在我的 React 应用程序中使用match通过 URL 路径名获取 uid 和令牌。 但是我得到了错误：

未捕获的类型错误：n 未定义

这是我的代码片段：

const ResetPasswordConfirm = ( {match, reset_password_confirm} ) => {
    ...
    const onSubmit = e=> {
    e.preventDefault();

    const uid = match.params.uid;
    const token = match.params.token;

    reset_password_confirm(uid, token, new_password, re_new_password);
    setRequestSent(true);
    };
};

根据这个线程： https://stackoverflow.com/questions/70609785/uncaught-typeerror-match-is-undefined#:~:text=react%2Drouter%2Ddom%20v5,render%20or%20children%20prop%20functions 。 说是react router的版本可能有关系，所以我尝试使用useParams()，但是我发现很难实现...

我也尝试过使用 matchPath，但我找不到几个例子。

有人可以帮我解决这个问题吗？

更新：

反应路由器-dom 版本：6.8.0

ResetPasswordConfirm 在我的容器 package 中运行。

import React, { useState } from "react";
import { Navigate, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { reset_password_confirm } from '../actions/auth';

const ResetPasswordConfirm = ( {match, reset_password_confirm} ) => {

    const [requestSent, setRequestSent] = useState(false);
    const [formData, setFormData] = useState({
        new_password: '',
        re_new_password: ''
    });
    
const { new_password, re_new_password } = formData;

const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });

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

    const uid = match.params.uid;
    const token = match.params.token;

    reset_password_confirm(uid, token, new_password, re_new_password);
    setRequestSent(true);
};

// Is the user sending the request?
// Redirect them to the home page
if (requestSent) {
    return <Navigate to='/'/>
}

return (
  <div className="container mt-5">
    <form onSubmit={e => onSubmit(e)}>
        {/* <div className="form-group">
            <input className="form-control" type="email" placeholder="Email" name="email" value={email} onChange={e => onChange(e)} required></input>
        </div>
        <div className="form-group">
            <input className="form-control" type="password" placeholder="Password" name="password" value={password} onChange={e => onChange(e)} minLength='6' required></input>
        </div>
        <button className="btn btn-primary" type="submit">Login</button> */}
        <div className="form-group">
            <label htmlFor="exampleInputPassword1">Password</label>
            <input 
            type="password" 
            className="form-control" 
            id="exampleInputPassword1" 
            placeholder="New Password"
            name="new_password"
            value={new_password}
            onChange={e => onChange(e)}
            minLength='6'
            required></input>
        </div>
        <div className="form-group">
            <label htmlFor="exampleInputPassword1">Password</label>
            <input 
            type="password" 
            className="form-control" 
            id="exampleInputPassword1" 
            placeholder="Confirm New Password"
            name="re_new_password"
            value={re_new_password}
            onChange={e => onChange(e)}
            minLength='6'
            required></input>
        </div>
        <button type="submit" className="btn btn-primary">Reset Password</button>
    </form>
  </div>  
);
};

export default connect(null, { reset_password_confirm }) (ResetPasswordConfirm);

抱歉这个低保真问题。 我会努力做得更好。

我尝试使用 useParams 来获取我的 uid

const onSubmit = e => {
...
let{uid} = useParams()
}

Answer 1

react-router-dom路由组件中不再有路由道具，即没有任何注入的match道具。 您将使用useParams挂钩访问 RRDv6 中的路由路径参数。 您不能在嵌套回调中使用 React 挂钩，它们必须在 React 组件的 function 主体或自定义 React 挂钩中调用。 在组件主体中使用useParams挂钩并解构uid和token路径参数。 由于您正在使用挂钩，因此您也可以导入和使用useNavigate挂钩，并在表单的onSubmit处理程序结束时发出导航操作，而不是将 state 更新加入队列。

import React, { useState } from "react";
import { useParams, useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { reset_password_confirm } from '../actions/auth';

const ResetPasswordConfirm = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { uid, token } = useParams();

  const [formData, setFormData] = useState({
    new_password: '',
    re_new_password: ''
  });
    
  const onChange = e => setFormData(formData => ({
    ...formData,
    [e.target.name]: e.target.value
  }));

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

    const { new_password, re_new_password } = formData;

    dispatch(reset_password_confirm(uid, token, new_password, re_new_password));
    navigate("/");
  };

  return (
    ...
  );
};

export default ResetPasswordConfirm;