Obtengo algunos productos de una API y los muestro en la tarjeta. Hay un enlace Más detalles en las tarjetas, donde si el usuario hace clic en él, lo llevará a la página de detalles del producto seleccionado. Mi enrutamiento a la página de detalles del producto funciona, pero tengo problemas para encontrar una manera de pasar los datos obtenidos a la página de detalles del producto como accesorios.
Esto es lo que tengo hasta ahora: My FeaturedProduct.js:
import React from "react"; import { useState, useEffect } from "react"; import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import ProductDetails from "./ProductDetails"; import axios from "axios"; function FeaturedProduct(props) { const [products, setProducts] = useState([]); useEffect(() => { fetchProducts(); }, []); function fetchProducts() { axios .get("https://shoppingapiacme.herokuapp.com/shopping") .then((res) => { console.log(res); setProducts(res.data); }) .catch((err) => { console.log(err); }); } return ( <div> <h1> Your Products List is shown below:</h1> <div className="item-container"> {products.map((product) => ( <div className="card" key={product.id}> {" "} <h3>{product.item}</h3> <p> {product.city}, {product.state} </p> <Router> <Link to="/productdetails">More Details</Link> <Switch> <Route path="/productdetails" component={ProductDetails} /> </Switch> </Router> </div> ))} </div> </div> ); } export default FeaturedProduct;Mi página de detalles del producto:
import React from "react"; import FeaturedProduct from "./FeaturedProduct"; function ProductDetails(props) { return ( <div> <div> <h1>{props.name}</h1> <h1>{props.color}</h1> </div> </div> ); } export default ProductDetails;Todavía estoy aprendiendo, pero esto es lo que haría:
<Route path="/productdetails"> <ProductDetails product={product}/> </Route>====
En ProductDetails puedes desestructurar los accesorios:
function ProductDetails(props) { const {name, color} = props.product; return ( <div> <div> <h1>{name}</h1> <h1>{color}</h1> </div> </div> ); } export default ProductDetails;Páselo como un elemento con accesorios, si está usando v 6; Lo siento, no pregunté qué versión. >
<Switch> <Route path="/productdetails" element={<ProductDetails {...props} />}/> </Switch>si la versión v4/5 usa el método render >
<Route path="/productdetails" render={(props) => ( { <ProductDetails {...props} />} )}/> //pass it this way <Switch> <Route path="/productdetails" render={() => ( { <ProductDetails product={product}/>})}/> /> </Switch>