从其他页面获取时，React 没有获取 id

Question

我正在创建一个页面，例如亚马逊，在索引页面中我有一些产品的列表，当用户单击链接时，它会转到包含产品所有详细信息的产品页面，但我创建此页面 我必须从产品中获取 ID，但无法获取。

App.js

<main className="main">
 <div className="content">
  <Routes>
   <Route path="/product/:id" element={<ProductScreen />} />
   <Route path="/" exact element={<HomeScreen />} />
  </Routes>
 </div>
</main>

主屏幕

import React from 'react';
import data from "../data";
import { Link } from 'react-router-dom';

function HomeScreen(props) {
    return (
    <ul className="products">
    {
      data.products.map(product => 
        <li>
          <div className="product">
          <Link to={'/product/' + product._id}>
                <img
                src={product.image}
                alt="Product"
                className="product-image"
                />
            </Link>
            <div className="product-name">
              <Link to={'/product/' + product._id}>{product.name}</Link>
            </div>
            <div className="product-brand">{product.brand}</div>
            <div className="product-price">{product.price}</div>
            <div className="product-rating">{product.rating} Leafs ({product.numberReviews} Reviews)</div>
          </div>
        </li>
      )
    }
  </ul>
    );
}

export default HomeScreen;

产品屏幕

import React from 'react';
import data from '../data';

function ProductScreen(props) {
    console.log(props.match.params.id)
    return <div>Product Screen</div>
}

export default ProductScreen;

我 console.log 看看是否一切正常，但显示的错误是

TypeError: Cannot read properties of undefined (reading 'params')

我错过了什么？我尝试了一些我在网上看到的东西。

Answer 1

你需要使用来自 React Router Dom 的 useParams 钩子。如下：

import React from 'react';
import data from '../data';
import {useParams} from "react-router-dom"

function ProductScreen(props) {
 const {id} = useParams();
 console.log(id)
 return <div>Product Screen</div>
}

export default ProductScreen;