0
79
VistasRuta de reacción a una página de detalles de producto específica desde una página de producto
Tengo una página de producto, donde si el usuario hace clic en una tarjeta de producto específica, se redirigirá al usuario a una nueva página donde solo se mostrarán los detalles de ese producto específico. Sin embargo, en mi código, incluso después de redirigirlo a la página de detalles, aún muestra la lista completa de productos en esa página. Necesito un poco de ayuda para resolver este problema. He intentado pasar accesorios para diferenciar. Pero no parece funcionar. Mi producto destacado.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"> <ProductDetails product={product}/> </Route> </Switch> </Router> </div> ))} </div> </div> ); } export default FeaturedProduct;Mi ProductDetails.js:
function ProductDetails(props) { const {name, color} = props.product; return ( <div> <div> <h1>{name}</h1> <h1>{color}</h1> </div> </div> ); } export default ProductDetails;Mi aplicación.js:
import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import FeaturedProduct from "./FeaturedProduct"; import "./App.css"; function App() { return ( <div className="App"> <FeaturedProduct /> </div> ); } export default App;1 Respuestas
Responde la pregunta0
Tema
Está representando ese mismo enrutador/enlace/ruta para cada elemento de producto mapeado.
<Router> <Link to="/productdetails">More Details</Link> <Switch> <Route path="/productdetails"> <ProductDetails product={product}/> </Route> </Switch> </Router> Esto significa que cuando la ruta es "/ detalles del producto", representa un componente Route y ProductDetails del producto para todos y cada uno de ellos.
Una solución
Es más común representar un solo Router y Route para una página de detalles del producto con una id de producto específica como un parámetro de ruta o para pasar el objeto de producto completo en estado de ruta ( aunque menos común ).
Mueva el Router a la App para proporcionar un contexto de enrutamiento único a la aplicación:
function App() { return ( <Router> <div className="App"> <FeaturedProduct /> </div> </Router> ); } Mueva el Switch y la Route debajo del mapeo de products , dejando solo el Link en la devolución de llamada del mapa. Enlace a una id de producto específica y use el accesorio de render de Route para buscar el producto coincidente por id para pasarlo como accesorio:
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> <Link to={`/product/${product.id}`}>More Details</Link> </div> ))} </div> <Switch> <Route path="/product/:id" render={({ match }) => ( <ProductDetails product={products.find( (product) => String(product.id) === match.params.id )} /> )} /> </Switch> </div> ); } 