React项目中Product页面通过match.params.id匹配产品ID报错求助

看起来你遇到的核心问题是React Router v6已经不再通过组件props传递match对象了，这也是你尝试转换match.params.id类型却依然报错的原因——因为你根本没拿到正确的参数值！

问题分析 #

在React Router v5及更早版本中，路由组件会自动接收match、location等props，但v6彻底重构了路由API，移除了这些props的自动传递，转而使用钩子函数来获取路由相关信息。

解决方案：使用useParams钩子获取URL参数 #

修改你的Product.js代码，用useParams替代原来的match props：

import React from "react";
import { Link, useParams } from "react-router-dom"; // 新增useParams导入
import { Row, Col, Image, ListGroup, Button } from "react-bootstrap";
import products from "../products";

const Product = () => {
  // 使用useParams获取URL中的id参数
  const { id } = useParams();
  
  // 根据你的products数组里_id的类型处理：如果是数字就转成Number，字符串就直接用
  const product = products.find((item) => item._id === Number(id));

  // 可以加个判断避免找不到product时报错
  if (!product) {
    return <div>Product not found</div>;
  }

  return <div>{product.name}</div>;
};

export default Product;

额外检查点 #

• 确认你的products数组里的_id类型：如果_id是字符串，就不需要用Number()转换，直接item._id === id即可
• 你的App.js里已经正确使用了v6的Routes和Route组件，这部分是没问题的

这样修改后，就能正确获取到URL中的产品ID并匹配对应的产品了。

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