title: React Routing: URL is changing but the components remain same
body: <p>I have simplified my problem. When I try to navigate through the nav-bar, url changes but the component remains the same.
  I am new to React, and have trouble with routing. I used the latest version of &quot;react-router-dom&quot; where Switch was not working, so I went back to the version 5.2.0. I could use Switch there but the problem remained. I have tried a lot but all in vain. If there is an efficient and easy way of routing this, please help me with that. Thanks</p>
  <p><strong>App.js</strong></p>
  <pre><code>import './App.css';
  import React from &quot;react&quot;;
  import {
      BrowserRouter as Router,
      Switch,
      Route,
      Link
  } from &quot;react-router-dom&quot;;
  
  function App() {
      return (
          &lt;Router&gt;
  
              &lt;nav&gt;
                  &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt; &lt;br /&gt;
                  &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
              &lt;/nav&gt;
  
              &lt;Switch&gt;
                  &lt;Route exact path=&quot;/&quot; render={() =&gt; {
                      return (&lt;&gt; This is home page &lt;/&gt;)
                  }}&gt;
                  &lt;/Route&gt;
                  &lt;Route exact path=&quot;/about&quot; render={() =&gt; {
                      return (&lt;&gt; This is about &lt;/&gt;)
                  }}&gt;
                  &lt;/Route&gt;
              &lt;/Switch&gt;
  
          &lt;/Router&gt;
      );
  }
  export default App;
  </code></pre>