Чем заменить объект match?

Question

[webhero]

смотрел курс по реакту и видимо он слегка устарел. Я так понимаю в новой версии реакта нет объекта match и он мне сыпет ошибку: undefined is not an object (evaluating 'match.params')
Не понимаю как это обойти, вроде как сейчас в роутинге используется useParams

import React, { useContext, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { GithubContext } from "../context/github/GithubContext";

export const Profile = ({match}) => {
    const {getUser, getRepos, loading, user} = useContext(GithubContext)
    const urlName = match.params.name
    //const {urlName} = useParams()
    // console.log({urlName});

    useEffect(() => {
        getUser(urlName)
        getRepos(urlName)
        // console.log('effect')
        // eslint-disable-next-line
    }, [])

    if(loading) {
        return <p className="text-center">Loading...</p>
    }
    const {
        name, company, avatar_url, location, bio, blog, login, html_url, following, followers, public_repos, public_gists
    } = user

    return (
        <>
            <Link to="/" className="btn btn-primary">Homepage</Link>
            <div className="card mb-4">
                <div className="card-body">
                    <div className="row">
                        <div className="col-sm-3 text-center">
                            <img src={avatar_url} alt={name} />
                            <h1>{name}</h1>
                            {location && <p>Location: {location}</p>}
                        </div>
                        <div className="col">
                            {bio && <>
                            <h3>BIO:</h3>
                            <p>{bio}</p>
                            </>}
                            <a href={html_url} target="_blank" rel="noreferrer noopener" className="btn btn-dark">Open profile</a>
                            <ul>
                                {login && <li>
                                    <strong>Username:</strong> {login}
                                    </li>}
                                {company && <li>
                                    <strong>Company:</strong> {company}
                                    </li>}
                                {blog && <li>
                                    <strong>Website:</strong> {blog}
                                    </li>}
                            </ul>
                            <div className="badge badge-primary">Followers: {followers}</div>
                            <div className="badge badge-success">Followed: {following}</div>
                            <div className="badge badge-info">Repository: {public_repos}</div>
                            <div className="badge badge-dark">Gists: {public_gists}</div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

Answer 1

[Mikhail Osher]

useMatch() возвращает объект match
useParams() возвращает объект match.params

Раньше все данные роутинг компонента насильно прокидывались пропами в компонент, даже когда компоненту этого не нужно было знать. Теперь это заменили хуками (заодно изменив сигнатуру роутера с Route path="xxx" component={MyPage} на Route path="xxx" element={<MyPage />})