如何使用React Router DOM v6匹配API返回的产品ID？

React Router DOM v6 移除了v5中的match props，要获取URL中的产品ID来请求DRF接口数据，你可以使用useParams钩子来实现，以下是修改后的完整代码及关键调整点：

关键修改点： #

• 从react-router-dom导入useParams钩子
• 移除组件参数中的{ match }，改用useParams()获取URL参数
• 将请求URL中的match.params.id替换为获取到的id
• 在useEffect的依赖数组中加入id，确保参数变化时重新拉取对应产品数据
• 修复代码里的两处小问题：coutInStock拼写错误（应为countInStock）、描述行多余的$符号

修改后的ProductScreen.js代码： #

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { Row, Col, Image, ListGroup, Button, Card } from "react-bootstrap";
import Rating from "../Rating";
import axios from "axios";

function ProductScreen() {
  const { id } = useParams();
  const [product, setProduct] = useState({});

  useEffect(() => {
    async function fetchProduct() {
      const { data } = await axios.get(`/api/products/${id}`);
      setProduct(data);
    }
    fetchProduct();
  }, [id]);

  return (
    <div>
      <Link to="/" className="btn btn-dark my-3">
        Go Back
      </Link>

      <Row>
        <Col md={6}>
          <Image
            className="imgCustom"
            src={product.image}
            alt={product.name}
          ></Image>
        </Col>
        <Col md={3}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <h3>{product.name}</h3>
            </ListGroup.Item>
            <ListGroup.Item>
              <Rating
                value={product.rating}
                text={`${product.numReviews} reviews`}
                color={"#f8e825"}
              />
            </ListGroup.Item>
            <ListGroup.Item>Price : ${product.price}</ListGroup.Item>

            <ListGroup.Item>Description: {product.description}</ListGroup.Item>
          </ListGroup>
        </Col>

        <Col md={3}>
          <Card>
            <ListGroup variant="flush">
              <ListGroup.Item>
                <Row>
                  <Col>Price : </Col>
                  <Col>
                    <strong>$ {product.price}</strong>
                  </Col>
                </Row>
              </ListGroup.Item>

              <ListGroup.Item>
                <Row>
                  <Col>Status : </Col>
                  <Col>
                    {product.countInStock > 0 ? "In Stock" : "Out of Stock"}
                  </Col>
                </Row>
              </ListGroup.Item>

              <ListGroup.Item>
                <Button
                  className="btn-block"
                  disabled={product.countInStock === 0}
                  type="button"
                >
                  Add to Cart
                </Button>
              </ListGroup.Item>
            </ListGroup>
          </Card>
        </Col>
      </Row>
      {product.name}
    </div>
  );
}

export default ProductScreen;

补充说明：如果你的路由配置是element={<ProductScreen />}的v6标准写法，useParams是最直接的适配方案；如果涉及嵌套路由场景，也可通过Outlet传递参数，但当前场景用useParams完全满足需求。

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