如何在动态路由中向Card组件传递Props？

我从JSON获取产品数组并将其存入Redux，现在想知道如何在动态路由中向Card组件传递Props。点击Home组件中产品的Link可跳转至对应产品页面，相关JSON示例及代码如下：

产品JSON示例 #

{
    "product": [
        {
            "id": 1,
            "image": "/assets/images/products/27672/1.jpg",
            "name": "Product 1",
            "price": "0.20",
            "category": 2
        },
        {
            "id": 2,
            "image": "/assets/images/products/27672/2.jpg",
            "name": "Product 2",
            "price": "0.1",
            "category": 3
        }
    ]
}

App组件代码 #

<div className="App">
  <Header />
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/product/:id' element={<Card />} />
  </Routes>
  <Footer />
</div>

Home组件跳转Link代码 #

<div className="catalog_block">
   <Link to={'product/' + id}>
     <img src={image} />
    </Link>
</div>

因为产品数据已存入Redux，可通过以下步骤为Card组件传递对应产品的Props：

1. 在Card组件中获取并匹配产品数据 #

借助react-router-dom的useParams钩子拿到路由参数，再从Redux中筛选出对应产品：

import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';

const Card = () => {
  // 获取动态路由中的id参数
  const { id } = useParams();
  // 从Redux取出产品数组（路径需匹配你的Redux实际配置）
  const products = useSelector(state => state.products);
  // 匹配对应产品：注意路由id是字符串，需转数字和产品id匹配
  const targetProduct = products.find(item => item.id === Number(id));

  // 处理产品不存在的情况
  if (!targetProduct) {
    return <div>该产品不存在</div>;
  }

  // 直接使用targetProduct的属性渲染组件
  return (
    <div className="product-card">
      <img src={targetProduct.image} alt={targetProduct.name} />
      <h2>{targetProduct.name}</h2>
      <p>价格：${targetProduct.price}</p>
      <p>分类ID：{targetProduct.category}</p>
    </div>
  );
};

export default Card;

2. 关键注意点 #

• Redux路径要对应：useSelector中的state.products需和你存储产品数组的state节点一致，比如实际存在state.productList下，就要改成state.productList。
• 类型匹配：路由参数id是字符串类型，产品的id是数字，必须用Number(id)转换后再匹配，否则会因类型不匹配找不到产品。
• 异常处理：增加产品不存在的判断，避免用户手动输入无效id时页面报错。

内容的提问来源于stack exchange，提问作者Vitaliy