React Router实现点击商品仅展示对应详情页的方法

核心思路 #

通过react-router-dom的useParams钩子获取URL中的商品名称参数，再从商品数据中筛选出对应商品，最后仅渲染该商品即可。

步骤1：修改ProductPage组件 #

完整代码示例 #

import React from "react";
import "./ProductPage.css";
import { data } from "./data.js";
import { useParams } from "react-router-dom"; // 导入useParams钩子

export default function ProductPage() {
  // 从URL中获取商品名称参数
  const { name } = useParams();

  // 根据名称筛选目标商品（可根据需求处理大小写匹配）
  const targetProduct = data.find(item => item.name === name);

  // 处理商品不存在的情况
  if (!targetProduct) {
    return <div className="product-not-found">未找到该商品</div>;
  }

  // 仅渲染选中的单个商品
  return (
    <div className="productPage-container">
      <div className="image-container">
        <img src={targetProduct.img} alt={targetProduct.name} />
      </div>
      <div className="about-product">
        <span className="product-type">{targetProduct.type}</span>
        <h2 className="product-name">{targetProduct.name}</h2>
        <span className="product-price">${targetProduct.price}</span>
        <p className="product-desc">{targetProduct.desc}</p>
      </div>
    </div>
  );
}

优化建议（可选） #

1. 处理URL特殊字符问题 #

如果商品名称包含空格、中文或特殊字符，直接传入URL会导致匹配失败，需要对参数进行编码/解码：

• 在Product组件中修改Link：

<Link to={`/productpage/${encodeURIComponent(name)}`}>
  <img src={img} alt={name} />
</Link>

• 在ProductPage中解码参数：

const { name } = useParams();
const decodedName = decodeURIComponent(name);
const targetProduct = data.find(item => item.name === decodedName);

2. 改用商品ID作为URL参数 #

商品名称可能存在重复，使用唯一ID作为参数更可靠：

• 修改路由配置：

{
  path: "productpage/:id",
  element: <ProductPage/>,
}

• 在Product组件中传递ID：

<Link to={`/productpage/${item.id}`}>
  <img src={img} alt={name} />
</Link>

• 在ProductPage中根据ID查找商品：

const { id } = useParams();
const targetProduct = data.find(item => item.id === parseInt(id));

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