ReactJS实现动态URL跳转至指定商品详情UI页面咨询

没问题，我来帮你搞定这个需求！要实现点击商品跳转到自定义详情页，我们需要用到React Router来管理单页路由，同时调整数据获取逻辑，具体步骤如下：

1. 安装React Router #

首先需要安装react-router-dom来实现单页应用的路由跳转：

npm install react-router-dom
# 或者使用yarn
yarn add react-router-dom

2. 配置路由结构 #

修改你的主App组件，整合路由规则，把商品列表设为首页，新增详情页路由：

import React, { Component } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Contacts from './productListHook.js';
import ProductDetail from './ProductDetail.js'; // 后续创建该组件

export default class App extends Component {
  state = { contacts: [] };

  // 组件挂载时自动拉取商品列表
  componentDidMount() {
    this.contactList();
  }

  contactList() {
    fetch('http://localhost:8000/api/p_list')
      .then(res => res.json())
      .then((data) => { this.setState({ contacts: data }) })
      .catch(console.log);
  }

  render() {
    return (
      <Router>
        <Routes>
          {/* 商品列表首页 */}
          <Route path="/" element={<Contacts contacts={this.state.contacts} />} />
          {/* 商品详情页，接收id参数 */}
          <Route path="/product/:id" element={<ProductDetail />} />
        </Routes>
      </Router>
    );
  }
}

3. 修改列表项的跳转逻辑 #

把原来的<a>标签换成React Router的<Link>组件，跳转到自定义详情页路径，同时传递商品id：

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

const Contacts = ({ contacts }) => {
  return (
    <div className="product-list">
      {contacts.map((contact) => (
        <div key={contact.id} className="product-item">
          <img src={contact.image} alt={contact.title} className="img-fluid" />
          <h3>
            {/* 跳转到自定义详情页，携带商品id */}
            <Link to={`/product/${contact.id}`}>{contact.title}</Link>
          </h3>
          <p>{contact.description}</p>
          <p>¥{contact.price}</p>
        </div>
      ))}
    </div>
  );
};

export default Contacts;

注意：

• 给每个列表项添加key属性（React列表渲染的必填项）
• React中要用className代替原生的class属性
• 使用<Link>避免页面刷新，实现单页跳转

4. 创建自定义商品详情组件 #

新建./src/ProductDetail.js，根据URL参数请求详情数据并渲染自定义UI：

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

const ProductDetail = () => {
  // 获取URL中的商品id参数
  const { id } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 根据id请求商品详情
    // 👉 建议后端提供通用详情接口（比如/api/p/${id}），避免拼接后缀的麻烦
    fetch(`http://localhost:8000/api/p/product${id.slice(-2)}`)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch product');
        return res.json();
      })
      .then(data => {
        setProduct(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [id]);

  // 加载/错误状态处理
  if (loading) return <div>Loading product details...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>Product not found</div>;

  // 自定义详情UI
  return (
    <div className="product-detail">
      <img src={product.image} alt={product.title} className="img-fluid" />
      <h1>{product.title}</h1>
      <p className="price">¥{product.price}</p>
      <p className="description">{product.description}</p>
      <div className="extra-details">
        <p>Status: {product.status ? 'Available' : 'Unavailable'}</p>
        <p>Color: {product.color}</p>
        <p>Size: {product.size}</p>
        <p>Created on: {new Date(product.created_on).toLocaleDateString()}</p>
      </div>
    </div>
  );
};

export default ProductDetail;

提示：当前你的详情API是product01对应id19、product02对应id20，这种命名不够灵活。建议后端调整为/api/p/${id}的通用接口，这样无需拼接后缀即可请求任意商品。

5. 测试功能 #

启动React应用后，点击商品标题会跳转到/product/19或/product/20，页面会渲染你自定义的详情UI，而不是原来的API页面！

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