Проблема с путем и передачей реквизита к нему (компонент с картой)

Question

У меня довольно сложная проблема, я знаю, что, вероятно, сделал это совершенно неправильно, но я не знаю, как это сделать, используя this.props.match.params и route path = "/:car-category.

<Route exact path={"/car-VAN/"} component={() => <CarCategory category={"VAN"} link={"/car-VAN/"}/>}/>
<Route exact path={"/car-SUV/"} component={() => <CarCategory category={"SUV"} link={"/car-SUV/"}/>}/>

import React, {Component} from 'react';
import '../sass/main.scss';
import {Helmet} from "react-helmet";
import {
    Link
} from 'react-router-dom';


const car1 = {
    carName: 'car-name-1',
    cat: 'VAN',
    vin: '31321414124214',
};

const car2 = {
    carName: 'car-name-1',
    cat: 'SUV',
    vin: '31321414124321',
};

const carAll = [car1, car2, car3];

class CarCategory extends Component{

    render() {

        const {category, link} = this.props;
        let sortCar = carAll.filter( el => el.cat === category );

        return(
            <>     <section className='cars-section'>
                <div className='container'>
                    <Helmet>
                        <title>{category}</title>
                    </Helmet>
                    <h1 className='head-text-category-mobile'>{category}</h1>
                    <div className='cars-gallery-container'>
                        {
                            sortCar.map(el => {
                                {
                                    return(<React.Fragment key={el.vin}>
                                            <div className='one-car-container'>
                                                <Link to={link + el.carName}>
                                                    <div className='car-div'>
                                                        <div className='car-name'>{el.carName}</div>
                                                    </div>
                                                </Link>
                                            </div>
                                        </React.Fragment>
                                    )
                                }
                            })
                        }
                    </div>
                </div>
            </section>
            </>
        )
    }
}

export default CarCategory

мой английский sh нехорошо, и я не могу объяснить это лучше, я надеюсь, что кто-то может понять и помочь мне

Answer 1

Вы можете сделать это динамически c, используя параметр, установив свой маршрут на:

<Route exact path={"/car-:category"} component={CarCategory} />

CarCategory:

class CarCategory extends React.Component {
  render() {

    const { category } = this.props.match.params;
    const link = `/car-${category}/`;

    let sortCar = carAll.filter(el => el.cat === category);

    return (
        ...
        ...
    );
);

Это будет работать, но я бы не использовал маршрут как /car-:category. Вместо этого разбейте это как /car/:category.