title: The data passed via this.props.history.push has weird behavior in the target page
body: <p>I'm trying to push from base component to another with some data defined in the base component which is sent as params with <code>history.push</code>.</p>
  
  <p><strong><code>Base Component</code></strong></p>
  
  <pre><code>class BaseComponent extends React.Component
  {
      gotoTargetPage()
      {
        const params = { data: {fname: 'john', lname: 'doe' } };
        this.props.history.push('/target-page', params);
      }
  
      render()
      {
        return( &lt;button onClick={event =&gt; this.gotoTargetPage()}&gt;Go!&lt;/button&gt;)
      }
  }
  
  export default withRouter(BaseComponent);
  </code></pre>
  
  <p><strong><code>TargetPage Component:</code></strong></p>
  
  <pre><code>class TargetComponent extends React.Component
  {
      componentDidMount()
      {
        console.log(this.props.history.location.state.data);
      }
  
      render()
      {
        return( &lt;div&gt;Hi! I am {this.props.history.location.state.data.fname}.&lt;/div&gt;)
      }
  }
  </code></pre>
  
  <p>When I click the button on the base component, it successfully loads the target page. But console logs <code>this.props.history.state</code> as <code>undefined</code> and it renders data without the params (since it's not available).</p>
  
  <p>Here's the twist. If I refresh the page, I can see the data being displayed and  console correctly logs the data. Not just if I refresh but If I hit the back button (after the first step), the data is displayed and console logs the data. Also, this happens approximately 75% of the time, and in about one in four tries, it happens without any problem.</p>
  
  <p>I repeated the same situation creating new component but with the same result. What could be the reason for this?</p>
  
  <p><strong><code>Environment:</code></strong></p>
  
  <pre><code>"react": "^15.5.4",
  "react-router": "^4.1.1"
  </code></pre>