React Router路由中URL无法渲染产品ID问题求助

核心问题你已经排查到了：App.js渲染CategoryProduct组件时未传入产品id属性，导致组件内Link无法获取有效ID。下面是具体修复步骤：

1. 修改App.js，传递产品ID给CategoryProduct #

假设你的App.js中是通过遍历产品列表渲染CategoryProduct，需要在循环时把每个产品的id（或整个产品对象）传递给组件：

修复前（可能的错误代码） #

// App.js
import CategoryProduct from './components/CategoryProduct';

function App() {
  const [products, setProducts] = useState([]);

  // 从db.json获取数据的逻辑...

  return (
    <div>
      {/* 错误：未传入id或product属性 */}
      {products.map(product => (
        <CategoryProduct key={product.id} />
      ))}
    </div>
  );
}

修复后 #

选择以下两种方式之一：

• 方式一：传递整个产品对象

// App.js
{products.map(product => (
  <CategoryProduct key={product.id} product={product} />
))}

• 方式二：单独传递id属性

// App.js
{products.map(product => (
  <CategoryProduct key={product.id} id={product.id} />
))}

2. 更新CategoryProduct组件的Link跳转逻辑 #

根据App.js传递的参数，调整Link的to属性：

情况一：接收整个product对象 #

// CategoryProduct.jsx
import { Link } from 'react-router-dom';

function CategoryProduct({ product }) {
  return (
    <div className="product-item">
      {/* 使用product.id生成正确的路由 */}
      <Link to={`/products/${product.id}`}>
        <h3>{product.name}</h3>
        <p>${product.price}</p>
      </Link>
    </div>
  );
}

export default CategoryProduct;

情况二：单独接收id属性 #

// CategoryProduct.jsx
import { Link } from 'react-router-dom';

function CategoryProduct({ id }) {
  return (
    <div className="product-item">
      {/* 使用传入的id生成路由 */}
      <Link to={`/products/${id}`}>
        {/* 其他产品信息渲染... */}
      </Link>
    </div>
  );
}

export default CategoryProduct;

验证db.json的产品结构 #

确保你的db.json中产品数据包含有效的id字段，示例结构：

{
  "products": [
    {
      "id": 1,
      "name": "示例产品1",
      "price": 99,
      "category": "电子产品"
    },
    {
      "id": 2,
      "name": "示例产品2",
      "price": 199,
      "category": "家居用品"
    }
  ]
}

完成以上修改后，点击Link跳转时，URL会正确显示为http://localhost:3000/products/1（对应产品ID），而不是undefined。

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