React+React Router Dom实现电商单产品详情页跳转与展示

1. 修正路由配置（解决参数不匹配） #

先确保路由里正确定义带参数的路径，参数名要统一（比如用productId），以React Router v6为例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProductList from './components/ProductList';
import ProductDetail from './components/ProductDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<ProductList />} />
        {/* 定义带产品ID参数的详情页路由 */}
        <Route path="/product/:productId" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

注意：路径里的参数名（:productId）要和后续详情页获取的参数名完全一致，不能出现拼写错误。

2. 产品卡片跳转时传递ID #

在产品列表组件中，用Link组件将产品ID拼接到跳转路径中：

import { Link } from 'react-router-dom';

function ProductCard({ product }) {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      {/* 直接拼接产品ID到详情页路径 */}
      <Link to={`/product/${product.id}`}>查看详情</Link>
    </div>
  );
}

如果你的产品ID字段不是id（比如productId），要替换成对应字段名，避免传错值。

3. 详情页获取参数并渲染数据（修复查询逻辑） #

用useParams钩子获取路由参数，同时处理参数类型转换、数据查询失败等异常情况：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

// 示例产品数据，实际项目可替换为API请求
const productData = [
  { id: 1, name: '纯棉T恤', price: 29.99, desc: '舒适透气，多色可选' },
  { id: 2, name: '修身牛仔裤', price: 59.99, desc: '弹力面料，显瘦百搭' }
];

function ProductDetail() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 路由参数默认是字符串，若产品ID为数字需转类型
    const targetId = parseInt(productId, 10);
    if (isNaN(targetId)) {
      setError('无效的产品ID');
      setLoading(false);
      return;
    }

    // 模拟数据查询，实际项目替换为fetch/axios请求
    const getProduct = async () => {
      try {
        const matchedProduct = productData.find(item => item.id === targetId);
        if (!matchedProduct) {
          setError('未找到该产品');
        } else {
          setProduct(matchedProduct);
        }
      } catch (err) {
        setError('获取产品数据失败');
      } finally {
        setLoading(false);
      }
    };

    getProduct();
  }, [productId]);

  // 状态渲染逻辑
  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;
  if (!product) return <div>产品不存在</div>;

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <p className="price">${product.price}</p>
      <p className="desc">{product.desc}</p>
    </div>
  );
}

export default ProductDetail;

常见错误排查 #

• 参数名不匹配：路由里写:id但详情页取productId，导致参数为空
• 类型不匹配：路由参数是字符串，产品ID是数字，未转类型导致find匹配失败
• 路径拼写错误：卡片跳转路径是/products/${id}，但路由配置是/product/:productId，多了s导致404
• 依赖遗漏：useEffect依赖数组没加productId，参数变化时不重新查询数据

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