0
350
VistasMostrar detalles del elemento después de hacer clic en Enlace en React Router
He usado el enrutador para el enrutamiento. Hay una lista de productos y cuando se hace clic en un producto, se debe mostrar una página de detalles de ese producto (producto.nombre, producto.precio). Intenté pasar el objeto del producto en la consulta, pero no funciona de esa manera.
Aquí está mi código
productGrid.js
const product = _.map(products, (product) => <Col xs={12} md={4} key={product.id} className="products"> <div className="product"> <Link to={{pathname: `product/${product.name}`, query: { query: product }}}> <img src={product.image} className="img-responsive" /> </Link> <span className="pull-left product-name">{product.name}</span> <span className="pull-right price">${product.price}</span> </div> </Col> );producto-view.js
class ProductView extends React.Component { render() { console.log('product', this.props.location.query); return ( <div>Product View</div> ); } }this.props.location.query consolas
2 Respuestas
Responde la pregunta0
Le sugiero que pase la lista de productos como props a ProductView y luego recupere el producto con su id . De esta manera, no hay inconveniente cuando un usuario navega directamente al producto.
productGrid.js
<Link to={{pathname: `product/${product.name}`, query: { id: product.id }}}>producto-view.js
class ProductView extends React.Component { render() { const { products, location } = this.props; if (!products.length || !location) { return (<div>Loading...</div>); } const product = products.find(p => p.id == location.query.id); return product ? ( <div> <h1>{product.name}</h1> <img src={product.image} /> <p>{product.price}</p> </div> ) : ( <div>Error: Product doesn't exist</div> ); } }0
El objeto de query de un descriptor de ubicación se convertirá en una cadena de consulta. Puede usar la propiedad de state de un descriptor de ubicación para pasar el estado entre vistas.
<Link to={{ pathname: `product/${product.name}`, state: { product } }}> Luego, en el componente de su producto, puede marcar this.props.location.state para obtener los datos asociados. La desventaja de esto es que un usuario que navegue directamente a la misma URL no tendrá disponible el state .