Estoy desarrollando un proyecto de comercio electrónico, logré crear una cuadrícula de productos y un enlace a una ruta al producto específico, pero no puedo ver los datos del artículo. El código de mis productos está aquí.
const Container = styled.div` padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; ` const Products = () =>{ return ( <Container> {products.map(item=>( <Product item={item} key={item.id}/> ))} </Container> ) } export default Products;Mi código de producto está aquí
const Product = ({item}:any) => { return ( <Container > <Link to={"/productDetail/" + item.id}> <img src={item.image} className='imag'/> </Link> <Box justifyContent='center' display='flex'> <Typography> {item.name} </Typography> </Box> <Box justifyContent='center' display='flex'> <Typography> {item.price} </Typography> </Box> <Box justifyContent='center' className='display' > <Button className='btn'>Buy</Button> </Box> </Container> ) } export default Product;Y aquí está mi intento de crear una sola página de producto.
function ProductDetail() { let { id } = useParams<{ id: string }>(); return ( <div> <img src={item.image} className='imag' /> </div> ) } export default ProductDetail;Y mi ruta en la página de inicio es así:
<Route exact path="/productDetail/:id" > < ProductDetail /> </Route>No está viendo datos porque el elemento no está definido. Si desea pasar datos a ProductDetail usando la navegación, intente agregar el estado al Link y utilícelo dentro de <ProductDetail />
// product-grid page <Link to="path_to_product_detail" state={item}>...</Link> Ahora, dentro <ProductDetail /> importe el método useLocation desde el dom del enrutador de reacción, que contendrá los datos que se agregan a la propiedad de estado del componente de enlace.
//product-detail page const location = useLocation() // import from react-router-dom const item = location.state Sin embargo, esta no es la buena práctica para su caso de uso, porque en la página de cuadrícula del producto obtendrá solo algunos detalles como el título, la miniatura y la identificación. Pero en la descripción del producto, debe buscar todo lo relacionado con el producto que no haya llamado mientras estaba en la página de cuadrícula del producto. La mejor manera es completar los datos detallados, item en nuestro caso con api.