React.js, как получить свойства в пути URL?

Я пытаюсь получить uid и токен через путь URL-адреса, используя match в моем приложении React. Но я получил ошибку:

Uncaught TypeError: 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% 20 функций. В нем говорится, что это может иметь какое-то отношение к версии реактивного маршрутизатора, поэтому я попытался использовать useParams(), но мне было трудно его реализовать...

Я также пытался использовать matchPath, но могу найти несколько примеров.

Может ли кто-нибудь помочь мне с этой проблемой, пожалуйста?

Обновлять:

версия реактивного маршрутизатора: 6.8.0

ResetPasswordConfirm работает в моем контейнерном пакете.

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()
}