React中如何将选中商品的id从Product.js传递到ProductScreen组件

解决步骤 #

1. 修改Product.js组件跳转逻辑

你原来的Link放在map循环外层是错误的，需要给每个商品单独配置带对应ID的跳转链接，同时把原生a标签替换为React Router的Link避免页面全量刷新：

import React from 'react';
import { Link } from 'react-router-dom'; // 确保已导入Link组件
import data from './data';
import Rating from './Rating'; // 按你实际文件路径调整

function Product() {
return (
<div className="product">
    <div className="row center">
        {
             data.products.map(product=>(
                <div key={product._id} className="card card-deck">
                    <div className="product_image">
                        {/* 替换原生a标签为Link，路径匹配路由定义的参数格式 */}
                        <Link to={`/productScreen/${product._id}`}>
                            <img className="image" src={product.image} alt={product.name} style={{textAlign:"center"}}/>
                        </Link>
                    </div>
                    <div className="product_detail">
                        <Link to={`/productScreen/${product._id}`}>
                            <h4>{product.brand}</h4>
                            <p>{product.description}</p>
                        </Link>
                        <div className="product_rating_Page">
                            <Rating rating={product.rating} numReviews={product.numReviews}/>
                        </div>
                    </div>
                </div>
            ))
        }
    </div>
</div>
)}
export default Product;

2. 修正ProductScreen组件的参数获取逻辑

你原来的props解构写法错误，推荐用函数组件专属的useParams hook获取路由参数，写法更简洁：

import React from 'react';
import { useParams } from 'react-router-dom'; // 导入useParams钩子
import data from './data';
import Rating from './Rating';
import CurrencyFormat from 'react-currency-format'; // 按你实际文件路径调整

function ProductScreen() {
  const { id } = useParams(); // 直接提取路由中绑定的id参数
  const product = data.products.find(x => x._id === id);

  if(!product){
    return <div>Product Not Found</div>
  }

  return (
    <div className="productScreen">
      <div className="row">
        <div className="col-2">
          <img className="large" src={product.image} alt={product.name}/>
        </div>
        <div className="col-1">
          <ul>
            <li>
              <h1>{product.brand}</h1>
            </li>
            <li>
              <Rating rating={product.rating} numReviews={product.numReviews}/>
            </li>
            <li>
              <CurrencyFormat
                  renderText={(value) => (
                        <h5>{value}</h5>
                  )}
                  decimalScale={2}
                  value={product.price}
                  displayType={"text"}
                  thousandSeparator={true}
                  prefix={"$"}
              />
            </li>
            <li>
              <p>{product.description}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
)}
export default ProductScreen;

如果你想继续用props的方式获取参数，只需要修正参数解构即可：

// 去掉props外层的解构括号，直接接收props
function ProductScreen(props) {
  const product = data.products.find(x => x._id === props.match.params.id);
  // 其余逻辑不变
}

注意事项 #

• 你App.js中定义的路由格式是/productScreen/:id属于路径参数，不要写成query参数格式/productScreen?id=xxx，否则路由匹配失败也拿不到对应ID
• 不要混用原生a标签和Link组件，Link是React Router封装的组件，不会触发页面全量刷新，符合单页应用的交互逻辑

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