title: React-router - How to pass data between pages in React?
body: <p>I am working on a project where I have to pass data from one page to another.
  For example, I have <code>data</code> on the first page.</p>
  
  <pre><code>let data = [
    {id:1, name:'Ford', color:'Red'},
    {id:2, name:'Hyundai', color:'Blue'}
  ]
  </code></pre>
  
  <p>Here is the first component page where I render this list of data with the name. </p>
  
  <pre><code>class ListDetail extends Component {
      constructor();
      handleClick(data){
      console.log(data);
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Hello name={this.state.name} /&gt;
          &lt;ul&gt;
            {data.map((data,i) =&gt; {
              return &lt;li onClick={this.handleClick.bind(this,data)}&gt;{data.name}&lt;/li&gt;
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I want to pass this data to the next page where I need this data and more data than this. I am using React Router 4. Any suggestion or help would be helpful.</p>