路径问题并将道具传递给它（带地图的组件）答案

【问题标题】：Problem with the path and passing props to it (component with map)路径问题并将道具传递给它（带地图的组件）
【发布时间】：2020-06-19 05:31:39
【问题描述】：

我有一个相当复杂的问题，我知道我可能完全做错了，但我不知道如何使用 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

我的英文不好，无法更好地解释，希望有人能理解并帮助我

【问题讨论】：

标签： javascript reactjs react-native react-router react-router-dom

【解决方案1】：

您可以使用参数将其设置为动态，方法是将您的路线设置为：

<Route exact path={"/car-:category"} component={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 那样将其分解。

【讨论】：