Artikeldetails anzeigen nach dem Klicken auf Link in React Router

Question

Ich habe Router zum Routing verwendet. Es gibt eine Produktliste, und wenn auf ein Produkt geklickt wird, sollte eine Detailseite dieses Produkts angezeigt werden (product.name, product.price). Ich habe versucht, Produkt-Objekt in Abfrage zu übergeben, aber es funktioniert nicht so.

Hier ist mein Code

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> 
     ); 

Produkt-view.js

class ProductView extends React.Component { 
    render() { 
    console.log('product', this.props.location.query); 
    return (
     <div>Product View</div> 
    ); 
    } 
} 

this.props.location.query Konsolen

Answer 1

Ich würde vorschlagen, dass Sie die Liste der Produkte als props zu ProductView dann das Produkt mit seiner id abrufen. Auf diese Weise gibt es keinen Nachteil, wenn ein Benutzer direkt zum Produkt navigiert.

productGrid.js

<Link to={{pathname: `product/${product.name}`, query: { id: product.id }}}> 

Produkt-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> 
    ); 
    } 
} 

Answer 2

Sie query Objekt eines Standortdeskriptors wird in eine Abfragezeichenfolge umgewandelt. Sie können den state property eines Standortdeskriptors verwenden, um den Status zwischen Ansichten zu übergeben.

<Link to={{ pathname: `product/${product.name}`, state: { product } }}> 

Dann in Ihrem Produktkomponente, können Sie this.props.location.state überprüfen Sie die zugehörigen Daten zu erhalten. Der Nachteil hierbei ist, dass ein Benutzer, der direkt zur selben URL navigiert, die state nicht zur Verfügung hat.