React应用：为API列表条目创建独立路由及点击产品调用API

一、为每个产品条目创建独立路由 #

要实现产品列表项的独立路由，需借助react-router-dom库配置动态路由，具体步骤如下：

1. 安装路由依赖
   如果项目未安装react-router-dom，执行以下命令：

npm install react-router-dom
# 或
yarn add react-router-dom

2. 重构App组件，配置路由结构
   修改App组件，用BrowserRouter包裹应用，并添加列表页和产品详情页的路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ListItem from './ListItem';
import ProductDetail from './ProductDetail'; // 后续创建的详情组件

function App() {
  const [productList, setProductList] = useState([]);
  useEffect(() => {
    axios
      .get("http://172.17.17.101:8088/api/fa/Nas/Product/GetProductNameList")
      .then(function (res) {
        setProductList(res.data.messageItems[0].data);
      })
      .catch(function (err) {
        console.log(err);
      });
  }, []);

  return (
    <Router>
      <div className="App">
        <Routes>
          {/* 产品列表路由 */}
          <Route path="/" element={<ListItem productList={productList} />} />
          {/* 产品详情动态路由，以productId为参数 */}
          <Route path="/product/:productId" element={<ProductDetail />} />
        </Routes>
      </div>
    </Router>
  );
}

3. 修改ListItem组件，添加路由跳转
   将列表项的ListItemButton改为路由跳转链接，点击后跳转到对应产品的详情页：

import { Link } from 'react-router-dom';
// 保留原有的Material UI组件导入

export default function ListItem ({ productList }) {
  return (
    <List
      sx={{
        width: "100%",
        maxWidth: "40%",
        bgcolor: "background.paper",
        position: "relative",
        overflow: "auto",
        maxHeight: "80vh",
        "& ul": { padding: 0 },
      }}
    >
      {productList.map((product) => (
        <ListItemButton 
          key={product.productId}
          component={Link}
          to={`/product/${product.productId}`}
        >
          <ListItemText primary={product.productName} />
        </ListItemButton>
      ))}
    </List>
  );
}

这里利用Material UI组件的component属性，将ListItemButton渲染为Link组件，既保留原有样式，又实现路由跳转。

二、点击产品获取详细信息 #

创建产品详情组件，通过路由参数获取产品ID，再调用接口获取详情数据：

1. 创建ProductDetail组件

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

export default function ProductDetail() {
  const { productId } = useParams(); // 提取路由中的productId参数
  const [productDetail, setProductDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 调用产品详情接口，需根据实际后端接口调整URL和参数
    axios.get(`http://172.17.17.101:8088/api/fa/Nas/Product/GetProductDetail`, {
      params: { productId }
    })
    .then(res => {
      setProductDetail(res.data); // 根据接口返回结构调整赋值逻辑
      setLoading(false);
    })
    .catch(err => {
      setError(err.message);
      setLoading(false);
    });
  }, [productId]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>获取详情失败：{error}</div>;
  if (!productDetail) return <div>无产品数据</div>;

  return (
    <div className="product-detail">
      <h2>{productDetail.productName}</h2>
      {/* 根据接口返回的数据结构渲染其他详情字段 */}
      <p>产品ID：{productDetail.productId}</p>
      <p>产品描述：{productDetail.description}</p>
      {/* 更多详情内容 */}
    </div>
  );
}

关键说明： #

• 用useParams()钩子从动态路由中提取productId参数；
• 在useEffect中监听productId变化，确保切换产品时重新请求数据；
• 添加加载状态和错误处理，提升用户体验；
• 详情接口的URL和参数需根据实际后端接口调整，若采用RESTful风格，接口可能为http://172.17.17.101:8088/api/fa/Nas/Product/${productId}，需同步修改axios.get的URL。

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