title: React Router <Link> and <Route> not passing state to Component
body: <p>React Router: Link and Route not passing state to Component</p>
  
  <p>I’m building an online shopping app with React, Redux, and React Router. On the home page, all items are displayed. I want users to be able to click on an image and be taken to a page with item details for that item.</p>
  
  <p>Here's how I’m trying to do that:</p>
  
  <ul>
  <li>In App.js, I’m using BrowserRouter, Route, and Switch for routing</li>
  <li>In Home.js, I’m using react-router's Link to link an image on the Home page to an item details page; the Link is supposed to pass the ID to the Item component as state (see the Home.js code below)</li>
  <li>Item.js is supposed to render an items detail page. The ID of the item will be passed to the Item component, which will render the details for that item.</li>
  </ul>
  
  <p>This seems simple, and I’ve seen a lot of discussion about this on SO and across the web. Here are some that I have already tried:</p>
  
  <p><a href="https://stackoverflow.com/questions/41820210/display-item-details-after-clicking-link-in-react-router">Display item details after clicking Link in React Router</a></p>
  
  <p><a href="https://stackoverflow.com/questions/46611653/react-router-how-to-click-thru-to-detail-components">React router how to click thru to detail components</a></p>
  
  <p><a href="https://stackoverflow.com/questions/45598854/passing-values-through-react-router-v4-link">Passing values through React-Router v4 &lt;Link /&gt;</a></p>
  
  <p><a href="https://tylermcginnis.com/react-router-pass-props-to-link/" rel="nofollow noreferrer">Tyler McGinnis - Pass props to React Router's Link component</a></p>
  
  <p><a href="https://medium.com/alturasoluciones/how-to-pass-props-to-routes-components-29f5443eee94" rel="nofollow noreferrer">Medium - How to pass props to React routes components</a></p>
  
  <p>I’m able to get the URL to change to correspond to the item’s ID, but I can’t get the Item component to render with the right information, and sometimes I get errors depending on the method I’m using. I hard coded the words "Item Component" inside a div in Item.js, and that will render when I click on the images from the Home page. Otherwise, nothing will render <em>or</em> I receive the two following TypeErrors:</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>&lt;Route path="/products" render={(props) =&gt; (&lt;Item {...props} id={this.props.location.id} /&gt;) }/&gt;
  
  export default withRouter(App);
  </code></pre>
  
  <p><code>&lt;App /&gt;</code> is wrapped in <code>&lt;BrowserRouter&gt;</code> in index.js.</p>
  
  <p>I receive the following error when clicking on an image from the home page:</p>
  
  <p><strong>TypeError: Cannot read property 'props' of undefined</strong></p>
  
  <p>When the above “render” code is removed from  and replaced with “component={ Item }”, I receive this error from Item.js:
  <strong>TypeError: Cannot read property 'location' of undefined</strong></p>
  
  <hr>
  
  <p>Here are my other code snippets:</p>
  
  <p><strong>Item.js:</strong></p>
  
  <pre><code>class Item extends React.Component {
      constructor() {
          super();
  
          this.state = {
              item: this.props.location.state
          }
      }
  
      render() {
          let item = this.state.item;
          return (
              &lt;div className="item" key={item.id}&gt;
                  &lt;div className="item-image"&gt;
                      &lt;img src={item.img} alt={item.title} /&gt;
                  &lt;/div&gt;
                  &lt;div className="card-component"&gt;
                      &lt;span className="item-title"&gt;{item.title}&lt;/span&gt;
                      &lt;p className="item-price"&gt;&lt;b&gt;${item.price}&lt;/b&gt;&lt;/p&gt;
                      &lt;p className="item-desc"&gt;{item.desc}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Home.js</strong> (where all items are displayed), the item details page is linked like so:</p>
  
  <pre><code>&lt;Link to = 
      {{ pathname: `/products/${item.category}`,
      search: `?id=${item.id}`,
      state: {id: `${item.id}`} }}
      component={ Item }&gt;
      &lt;img src={item.img} alt={item.title} /&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have wrapped the <code>&lt;Item/&gt;</code> component in <code>withRouter()</code>.
  In Item.js, if I set the state in the constructor as <code>{ item: this.props.location.state }</code>, nothing renders as it should (only a dollar sign is on the screen, since the price section contains a hard coded dollar sign).</p>
  
  <p>I tried setting the Item.js state to <code>null</code> in the constructor, then calling <code>this.setState</code> with  <code>{ item: this.props.location.state }</code> in <code>componentDidMount()</code>. When I do this, I receive the following error:</p>
  
  <p><strong>TypeError: Cannot read property 'img' of null</strong></p>
  
  <p>Also, if I leave the <code>render={(props) =&gt; (&lt;Item {...props} id={this.props.location.id} /&gt;) }</code> in the <code>&lt;Route&gt;</code> in <code>App.js</code>, I receive this error:</p>
  
  <p><strong>TypeError: Cannot read property 'props' of undefined</strong></p>
  
  <p>If I change <code>&lt;Route&gt;</code> back to <code>component={ Item }</code>, and the Item.js constructor state is set to <code>{ item: this.props.location.state }</code>, just the dollar sign renders.</p>
  
  <p><strong>UPDATE</strong>: include App.js and Routes.js code</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import {
    BrowserRouter as Router,
    withRouter,
    Switch
  } from 'react-router-dom';
  import './App.css';
  import Navbar from './components/Navbar';
  import Footer from './components/footer/Footer';
  import { Routes } from './constants/Routes';
  
  
  class App extends React.Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Navbar /&gt;
            &lt;Switch&gt;
              { Routes }
            &lt;/Switch&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default withRouter(App);
  
  </code></pre>
  
  <p><strong>Routes.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Route } from 'react-router-dom';
  import Home from '../components/Home';
  import Item from '../components/shopping/Item';
  import Cart from '../components/cart/Cart';
  import OrderStatus from '../components/footer/OrderStatus';
  import GiftCards from '../components/footer/GiftCards';
  import ReturnsExchanges from '../components/footer/Returns-Exchanges';
  import Contact from '../components/footer/Contact';
  
  export const Routes = &lt;div&gt;
              &lt;Route exact path="/" component={ Home } /&gt;
              &lt;Route path="/products" component={ Item }/&gt;
              &lt;Route path="/cart" component={ Cart } /&gt;
              &lt;Route path="/order-status" component={ OrderStatus } /&gt;
              &lt;Route path="/gift-cards" component={ GiftCards } /&gt;
              &lt;Route path="/returns-exchanges" component={ ReturnsExchanges } /&gt;
              &lt;Route path="/contact" component={ Contact } /&gt;
              &lt;/div&gt;
  </code></pre>