javascript - 如何按键值过滤汽车

Question

我实现了汽车拍卖，并且目录组件中有一个汽车项目列表。我有指定汽车类型的按钮(SUV、自行车、乘客......)

当我单击任何按钮时，我想重定向到目录，其中包含根据类型汽车过滤的汽车列表。 所以带有对象的数据位于 App.js 中 我在 App.js 中有一个 Catalog 组件 目录组件有一个 CarItems 列表(CarItem 是 Catalog 中的一个子组件，它接收 Prop 并显示有关每辆车的信息(我使用 map 来显示整个列表)。 目录未过滤的问题。 我在 App.js 中声明了 Route。

 <Route
        exact
        path="/catalog/typeCar"
        render={({ match }) => (
          <Catalog item={data.find((item) => String(item.typeCar) === String(match.params.typeCar))} />
        )}

按钮位于另一个组件中，我为每个按钮创建了链接:

      <Link  to={`/catalog/passanger`}><img src={img_4} className='white-fill mr-2' width='70px'/></Link> 
            
      <Link  to={`/catalog/bike`}> <img src={img_1} width='70px' className='white-fill mr-2' /></Link>

      <Link  to={`/catalog/suv`}> <img src={img_2} width='70px' className='white-fill' /></Link>

      <Link  to={`/catalog/bus`}> <img src={img_3} width='70px' className='white-fill ml-2' /></Link>

 </Col>

所以我单击一个按钮，看到 URL 已更改:http://localhost:3000/catalog/passanger ，但页面上没有任何信息。它不会重定向到带有 CarItems 列表的目录页面(组件)

Answer 1

您使用 URL params 错误地定义了路线。您需要使用 :typeCar:

<Route
  exact
  path="/catalog/:typeCar" // Here
  render={({ match }) => (
    <Catalog
      item={data.find(
        (item) => String(item.typeCar) === String(match.params.typeCar)
      )}
    />
  )}
/>

此后，当您使用 Link 或 history.push 前往 /catalog/bike 等路线时， match.params.typeCar 的值(在路线的匹配对象中)将是bike。