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

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

Answer 1

您可以通过以下方式使用参数使它动态化：

<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那样将其分解。

路径和传递道具的问题（带有地图的组件）

1 个答案: