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.
Debe usar el gancho useParams de React Router Dom. Como abajo:
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;