Javascript 路径问题和向其传递道具（带有贴图的组件）

我有一个相当复杂的问题，我知道我可能做得完全不正确，但我不知道如何使用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}来自'React'；
导入“../sass/main.scss”；
从“react Helmet”导入{Helmet}；
进口{
链接
}从“反应路由器dom”；
常数car1={
卡纳姆：“车名1”，
猫：“货车”，
vin:'313214124214'，
};
常数car2={
卡纳姆：“车名1”，
猫：“SUV”，
vin:'31321414124321'，
};
const carAll=[car1，car2，car3]；
类CarCategory扩展组件{
render（）{
const{category，link}=this.props；
让sortCar=carAll.filter（el=>el.cat==category）；
返回(
{类别}
{类别}
{
sortCar.map（el=>{
{
返回(
{el.carName}
)
}
})
}
)
}
}
导出默认类别

---

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

您可以使用参数将路线设置为：

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

---

这会起作用，但我会避免使用像

/car-:category

这样的路线。相反，可以像

/car/:category

那样将其分解。您可以使用参数将路线设置为：

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

这会起作用，但我会避免使用像

/car-:category

这样的路线。相反，我会像

/car/:category

那样将其分解

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 (
        ...
        ...
    );
);