Estoy creando una página, como Amazon. En la página de índice tengo una lista de productos, y cuando el usuario hace clic en el enlace va a la página del producto que tiene todos los detalles del producto, pero para crear esta página tengo que obtener la identificación del producto. pero no puedo conseguirlo.

Aplicación.js:

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

Pantalla de inicio:

 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;

Pantalla de producto:

 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;

Lo consuelo. Lo registro para ver si todo estaba bien, pero el error que se muestra es

TypeError: no se pueden leer las propiedades de undefined (leyendo 'parámetros')

¿Qué me estoy perdiendo? Probé varias cosas que vi en la web.