我是 ReactJS 新手，看起来我正在按照旧教程使用旧版本的 React Router。因此目标是当我想要编辑用户详细信息时，必须在更新之前用之前用户的数据填充表单。我已经使用 axios 与后端通信并且运行良好，但问题出在“id = props.match.params.id”上。这是我的代码：

UserEdit.tsx

import axios from "axios";
import React, { SyntheticEvent, useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import Wrapper from "../../components/Wrapper";
import { Role } from "../../models/role";

const UserEdit = (props: any) => {
    const [first_name, setFirstName] = useState('');
    const [last_name, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [role_id, setRoleId] = useState('');
    const [roles, setRoles] = useState([]);
    const [redirect, setRedirect] = useState(false);
    let id: number;


    useEffect(() => {
        (
            async () => {
                const response = await axios.get('roles');

                setRoles(response.data);

                id = props.match.params.id;

                const {data} = await axios.get(`users/${id}`);

                setFirstName(data.first_name);
                setLastName(data.last_name);
                setEmail(data.email);
                setRoleId(data.role_id);
            }
        )()
    }, []);

    const submit = async (e: SyntheticEvent) => {
        e.preventDefault();

        await axios.put('users', {
            first_name,
            last_name,
            email,
            role_id
        });

        setRedirect(true)
    }

    if(redirect) {
        return <Navigate to="/users"/>
    }

    return (
        <Wrapper>
            <form onSubmit={submit}>
                <h1 className="h3 mb-3 fw-normal">Edit user</h1>
                <div className="form-floating">
                <input className="form-control" placeholder="First Name" defaultValue={first_name}  onChange={e => setFirstName(e.target.value)} required/>
                <label htmlFor="floatingInput">First Name</label>
                </div>
                <div className="form-floating">
                <input className="form-control" placeholder="Last Name"  defaultValue={last_name} onChange={e => setLastName(e.target.value)}  required/>
                <label htmlFor="floatingInput">Last Name</label>
                </div>
                <div className="form-floating">
                <input type="email" className="form-control" placeholder="Email Address" defaultValue={email} onChange={e => setEmail(e.target.value)} required/>
                <label htmlFor="floatingInput">Email Address</label>
                </div>
                <div className="form-floating">
                <select className="form-control" id="floatingRole" placeholder="Role" value={role_id} onChange={e => setRoleId(e.target.value)} required>
                    {roles.map((r: Role) => {
                        return (
                            <option key={r.id} value={r.id}>{r.name}</option>
                        )
                    })}
                </select>
                <label htmlFor="floatingRole">Role</label>
                </div>
                <button className="w-100 btn btn-lg btn-primary" type="submit">Save</button>

            </form>
        </Wrapper>

    );
};

export default UserEdit;

如下图所示，数据未显示，并显示如下错误消息

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')

如果有人愿意帮助我解决这个问题，以便我可以进一步学习，我将不胜感激。谢谢