Динамический Route в React

Проблема такова: есть компонент, который выводит 3 карточки с машинами. Компонент, ответственный за саму карточку одной машины выглядит так:

import React from 'react';
import './Car.css';
import {useNavigate} from "react-router";

const Car = props => {
  const navigation = useNavigate();
  
  return (
    <div className={'Car'}
         onClick={() => navigation('/cars/' + props.name.toLowerCase())}>
      <h3>Сar name: {props.name}</h3>
      <p>Year: <strong>{props.year}</strong></p>
    </div>
  )
}

export default Car;

Собственно, при клике на карточку, я вывожу информацию о машине на экран, для этого я использую еще один компонент:

import React from 'react';
import Car from '../Cars/Car/Car';
import Cars from '../Cars/Cars';

export default class CarDetail extends React.Component {
    render() {
        return (
            <div style={{textAlign: 'center'}}>
                <h1>Car_name</h1>
            </div>
        )
    }
}

Он выводит просто строку 'Car_name', но как вывести именно название самой машины? Я пробовал писать <h1>{this.props.match.params.name}</h1>, но это выдало мне ошибку undefined is not an object (evaluating 'this.props.match.params').