title: React - URL gets updated but the page is not rendered
body: <p>I am following along a beginner's course on React. The Nav. Bar has two options - About, HomePage. On clicking on the bar, the url gets updated but the page remains the same and nav stays. I get no error.</p>
  <p>App.js</p>
  <pre><code>import React from 'react';
  import HomePage from './HomePage';
  import About from './About';
  import Header from './common/Header';
  
  function App() {
      function getPage() {
          const route = window.location.pathname;
          if (route === &quot;about&quot;) return &lt;About /&gt;;
          console.log(&quot;hi&quot;);
          return &lt;HomePage /&gt;;   
          }  
      return(
          &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;Header&gt;
              { getPage() }
              &lt;/Header&gt;      
          &lt;/div&gt;
      );
      
  }
  export default App;
  </code></pre>
  <p>Header.js</p>
  <pre><code>import React from 'react';
  //to navigate across the website
  function Header(){
      return (
          &lt;nav&gt;
              &lt;a href=&quot;/&quot;&gt; Home &lt;/a&gt; | &lt;a href=&quot;/about&quot;&gt; About &lt;/a&gt;
          &lt;/nav&gt;
      );
  }
  export default Header;
  </code></pre>
  <p>index.js</p>
  <pre><code>import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import React from &quot;react&quot;;
  import {render} from &quot;react-dom&quot;;
  import App from &quot;./components/App&quot;;
  render(&lt;App /&gt;, document.getElementById(&quot;root&quot;)); 
  </code></pre>
  <p>About.js</p>
  <pre><code>import React from 'react';
  class About extends React.Component{
      render (){
          return(
              &lt;&gt;
                  &lt;h1&gt; About &lt;/h1&gt;
                  &lt;p&gt; This is the About Page &lt;/p&gt;
              &lt;/&gt;
          );
      }
  }    
  export default About;
  </code></pre>
  <p>HomePage.js</p>
  <pre><code>import React from &quot;react&quot;;
  import 'bootstrap/dist/css/bootstrap.min.css';
  function HomePage(){
      return(
      &lt;div className=&quot;jumbotron&quot;&gt;
          &lt;h1&gt;
              Welcome
          &lt;/h1&gt;
          &lt;p&gt;
              This is my first React Project
          &lt;/p&gt;
          
      &lt;/div&gt;
      );
      
  }
  export default HomePage;
  </code></pre>
  <p>There is no change in the page, only the URL gets updated.</p>
  <p>I have tried many solutions on SO but none worked so far.</p>