title: Re-render React Component when query string changes
body: <p>I am very new to React so apologies if this is just a duplicate - I have tried to look at solution to other questions but none have helped me.</p>
  
  <p>I want a React component to re-render when the query string of the page changes. I have a basic contact form and I'm pre-populating a single field with a value passed via the query string. My understanding is that React should re-render a component whenever it's state or components change and seeing as the query string is part of the props (this.) then I thought it would be easy, but this does not seem to be the case for me.</p>
  
  <p><strong>Route</strong></p>
  
  <pre><code>&lt;Route exact path="/contact-us" component={ContactUs} /&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import React, { PureComponent, Fragment } from 'react';
  import bannerImage from './../../assets/images/contact-banner.jpg';
  import QueryString from 'query-string';
  
  class ContactUs extends PureComponent {
    render() {
      return (
        &lt;Fragment&gt;
          &lt;CommonBanner banner={bannerImage} title="Contact us" /&gt;
          &lt;ContactUsForm tripName={QueryString.parse(this.props.location.search).tripName)} /&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default ContactUs;
  </code></pre>
  
  <p>I want the contact form to re-render when: The user has clicked through from a location which send the trip name through via the query string and then clicks the 'Contact Us' button in the header of the page which links to the Contact Us page again, but without the trip name in the query string. This should then remove the pre-population of the trip name field.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've noticed that if I manually removed the query string from the URL in the browser then the field is blanked out as expected. It's only when I click a link in the menu that just links to 'contact-us' that nothing seems to happen.</p>