如何使用React动态路由实现从API取数的电商商品详情动态页

你当前给出的路由配置无需修改，只需把component对应的Page替换为你开发的商品详情页组件即可，完整开发流程如下（以下示例基于React Router v5 版本，你给出的路由配置为v5语法，若使用v6版本仅需调整路由注册写法，核心逻辑通用）：

1.1 从动态路由中提取商品ID #

在商品详情页组件中，可以通过路由注入的属性拿到路径里的id参数：

• 函数组件写法：

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

function ProductDetailPage() {
  // 直接获取路由中的id参数
  const { id } = useParams();
  // 后续业务逻辑
}

• 类组件写法：

class ProductDetailPage extends React.Component {
  componentDidMount() {
    const productId = this.props.match.params.id;
    // 后续业务逻辑
  }
}

1.2 调用接口拉取商品数据 #

拿到商品ID后，调用后端API接口拉取对应商品的数据，同时处理加载中、请求错误、无数据三种边界状态，以函数组件为例：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
// 引入你封装的请求工具，比如axios
import axios from 'axios';

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

  useEffect(() => {
    const fetchProduct = async () => {
      setLoading(true);
      setError(null);
      try {
        // 替换为你实际的商品详情API接口地址
        const res = await axios.get(`/api/product/${id}`);
        setProduct(res.data);
      } catch (err) {
        setError(err.response?.data?.message || '商品信息加载失败，请稍后重试');
      } finally {
        setLoading(false);
      }
    };

    fetchProduct();
    // 当id变化时重新拉取数据，适配从A商品详情直接跳转到B商品详情的场景
  }, [id]);

  // 边界状态渲染
  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>
      <img src={product.coverImg} alt={product.name} />
      <div className="price">¥{product.price}</div>
      <div className="desc">{product.description}</div>
      {/* 其余商品详情字段、规格选择、加购等业务功能按需求扩展即可 */}
    </div>
  );
}

在商品列表页，点击商品跳转时，直接把对应商品的ID拼到路由路径里即可：

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

// 商品列表项示例
function ProductItem({ product }) {
  return (
    <Link to={`/product/${product.id}`} className="product-card">
      <img src={product.coverImg} alt={product.name} />
      <p>{product.name}</p>
      <p>¥{product.price}</p>
    </Link>
  );
}

• 可以对接口返回的商品详情数据做缓存，短时间内重复打开同一个商品详情不用重复请求
• 针对SEO需求可以搭配SSR方案或者预渲染方案处理动态内容的爬取问题

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