title: ReactJS - Re-render same component when navigate back
body: <p>I have a URL structure like </p>
  
  <pre><code>foo.com/details/:id
  </code></pre>
  
  <p>and using ReactRouter with it. If you search for an ID '123' the component renders the specific information from a database and updates the URL to</p>
  
  <p><code>foo.com/details/123</code></p>
  
  <p>If you search for another ID '456', the URL gets updated to</p>
  
  <p><code>foo.com/details/456</code></p>
  
  <p>with <code>this.props.history.push(${this.state.id});</code></p>
  
  <p>in short words - the component re-renders. If you reload or go directly to an ID with a URL the parameter works just as expected. Here is my question though: if you press the back button in the browser, the URL gets updated properly (456 => 123), but the component does not re-render.</p>
  
  <p>How can I force the component to re-render when the URL param changes?</p>
  
  <p>EDIT: more code</p>
  
  <p>In the constructor:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> if (this.props.match.params.id !== undefined) {
              this.state.id = this.props.match.params.id;
              this.getData(this.state.id)
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;form onSubmit={this.handleSubmit}&gt;
    &lt;input type="text" className="form-control mx-sm-3 mb-2" placeholder="Enter ID"value=             
           {this.state.id} onChange={this.handleChange}/&gt;
    &lt;input type="submit" value="Search" className="btn btn-primary mb-2"/&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>handleChange(event) {
        this.setState({id: event.target.value})
  }
  
  handleSubmit(event) {
        this.props.history.push(`${this.state.id}`);
        this.getData(this.state.id);
        event.preventDefault();
  }</code></pre>
  </div>
  </div>
  </p>