React，如何使用React Router Dom将产品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;

我安慰日志，看看是否一切正常，但显示的错误是

TypeError:无法读取未定义(读取"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;

如您所做设置/product/:id路由器后：

<Route path="/product/:id" element={<ProductScreen />} />

Answer 2

对于那些没有结果的人，试试这个：

import React from 'react';
import data from '../data';
import {useParams} from "react-router-dom"
function ProductScreen(props) {
const params = useParams();
const id = params.id
console.log(id)
return <div>Product Screen</div>
}
export default ProductScreen;