title: React Router: How to re-render the page when the user presses the back button
body: <p>I'm hoping there's a simple answer. I've tried different things and searched all over but I still haven't been able to fix the issue.</p>
  
  <p>SO!
  Using React-Router-Dom, I have a parent component with a logo that is in a fixed position and seen on all the child components/pages. </p>
  
  <pre><code>class Parent extends React.Component {
    render() {
      return (
         &lt;div&gt;
          {window.location.pathname==='/contact' ? 
           null :
           &lt;div className='originalLogo'&gt;&lt;/div&gt;
          }
         &lt;/div&gt;
  </code></pre>
  
  <p>)
   }
  }</p>
  
  <p>But on the Contact page, the logo is replaced with a modified version and the original is set to null.</p>
  
  <pre><code>class Child extends React.Component {
     render() {
       return (
        &lt;div className='modifiedLogo'&gt;&lt;/div&gt;
    )
  </code></pre>
  
  <p>}
  }</p>
  
  <p>I'm able to capture this change when the user manually clicks on the contact page through the menu. But here is where the issue starts. If the user opens up the menu bar and clicks to the homepage, the logo changes back to its original version. BUT if the user clicks 'BACK' on the browser from the contact page, the logo stays as the modified version instead of the original version. It's only until the user clicks on the menu at the homepage, which will cause the page to re-render due to the state change (of the menu display), and then the logo will go back to its original form.</p>
  
  <p>So my question is, how do I re-render the page when the user clicks the 'BACK' button on the browser?</p>