Display item details after clicking Link in React Router

Question

I have used router for routing. There is a list of product and when a product is clicked, a detail page of that product should be shown(product.name, product.price). I tried passing product object in query but it is not working that way.

Here is my 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>
          );

product-view.js

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

this.props.location.query consoles

What's the problem? Do you have an error? Is `this.props.location.query` undefined? — GG., Jan 24 '17 at 04:54
Try `console.log('product', this.props.location.query.query)` — GG., Jan 24 '17 at 04:58

GG. · Accepted Answer · 2017-01-24T05:41:51.750

4

I would suggest you to pass the list of products as props to ProductView then to retrieve the product with its id. This way there is no downside when a user navigates directly to the product.

productGrid.js

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

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

edited Jan 24 '17 at 05:41

answered Jan 24 '17 at 05:09

GG.

21,083
14
84
130

First I have to fetch the state of products using mapStateToProps and use the find function to find the product that matches with the id that is passed in query, right? – Serenity Jan 24 '17 at 05:14
i get this.props.products.find is not a function error – Serenity Jan 24 '17 at 05:20
Yes you have to fetch the products first (I don't know about `mapStateToProps`, I've never used Redux). You can display a loading when the products are fetching (see my edit). – GG. Jan 24 '17 at 05:21
Initialize products with an empty array (`products = []`) then fetch the products. This way `this.props.products` is never undefined. – GG. Jan 24 '17 at 05:25
Its working now. Your code has no error. It is mistake from my side. – Serenity Jan 24 '17 at 05:30
1

Glad it helped you. :) – GG. Jan 24 '17 at 05:30

score 1 · Answer 2 · answered Jan 24 '17 at 05:00

1

They query object of a location descriptor will be turned into a query string. You can use the state property of a location descriptor to pass state between views.

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

Then, in your product component, you can check this.props.location.state to get the associated data. The downside to this is that a user that navigates directly to the same URL will not have the state available to them.

answered Jan 24 '17 at 05:00

Paul S

35,097
6
41
38

For resolving the downside, is there only option of localstorage? – Serenity Jan 24 '17 at 05:01
It all depends on where your data is coming from. Aside from keeping things in localStorage, you could also check if `location.state` exists, and if it isn't, make an AJAX request for the data. – Paul S Jan 24 '17 at 05:07

Display item details after clicking Link in React Router

2 Answers2

Linked