title: When a React button is clicked the url/route changes. But the content associated with the url/route does not render
body: <p>I am new to react, and I have many videos, but I can not find my problem. I want to open the contact me section when I click the contact me button present on the main page. When I click on the contact me button, it changes the route in the URL but does the opens the page.
  When I try to open the same page by clicking the link present in the navbar, it works.</p>
  <p>I am cleaning up while posting the question to maintain readability.</p>
  <p>This is my App.js</p>
  <pre><code>import React from 'react';
  import Nav from './components/Nav';
  // Import Pages
  import AboutMe from './pages/AboutMe';
  import MyWork from './pages/MyWork';
  import ContactMe from './pages/ContactMe';
  // Router
  import {BrowserRouter, Route, Switch, useLocation } from &quot;react-router-dom&quot;;
  function App() {
    const location = useLocation();
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;GlobalStyle /&gt;
        &lt;Nav /&gt;
        &lt;BrowserRouter&gt;
          &lt;Switch location={location} key={location.pathname}&gt;
            &lt;Route path=&quot;/&quot; exact&gt;
              &lt;AboutMe /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/work&quot; exact&gt;
              &lt;MyWork /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/contact&quot; exact&gt;
              &lt;ContactMe /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>This is my AboutSection.
  In my about section, when I click on my button, it enters /contact but does not open the page, but when I try to open the same route while clicking on the link from the navbar, it opens the link.</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  //Images
  
  const AboutSection = () =&gt; {
    return (
      &lt;About&gt;
        &lt;Description&gt;
          {/*This is the button */}
          &lt;Link to=&quot;/contact&quot;&gt;
            &lt;motion.button variants={fade}&gt;
              Contact Me
            &lt;/motion.button&gt;
          &lt;/Link&gt;
        &lt;/Description&gt;
        &lt;Image&gt;
          &lt;motion.img variants={photoAnim} src={homeImg1} alt=&quot;camera guy&quot; /&gt;
        &lt;/Image&gt;
        &lt;Wave /&gt;
      &lt;/About&gt;
    );
  };
  
  const Hide = styled.div`
    overflow: hidden;
  `;
  
  export default AboutSection;
  </code></pre>
  <p>Code of my Nav.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link, useHistory } from &quot;react-router-dom&quot;;
  const Nav = () =&gt; {
    return (
        &lt;StyledNav&gt;
          &lt;h1&gt;
            &lt;Link id=&quot;logo&quot; to=&quot;/&quot;&gt;
              Nitish Poonia
            &lt;/Link&gt;
          &lt;/h1&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/contact&quot;&gt;Contact Me&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/StyledNav&gt;
    );
  };
  export default Nav;
  </code></pre>
  <p>My Contact me</p>
  <pre><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  //Animation
  import { motion } from &quot;framer-motion&quot;;
  import { pageAnimation, titleAnim } from &quot;../animation&quot;;
  
  const ContactUs = () =&gt; {
    return (
      &lt;ContactStyle&gt;
        &lt;Title&gt;
          &lt;Hide&gt;
            &lt;motion.h2 variants={titleAnim}&gt;Get in touch.&lt;/motion.h2&gt;
          &lt;/Hide&gt;
          &lt;div className=&quot;line2&quot;&gt;&lt;/div&gt;
        &lt;/Title&gt;
        &lt;div&gt;
          &lt;Hide&gt;
            &lt;Social variants={titleAnim}&gt;
              &lt;Circle /&gt;
              &lt;h2&gt;Socials&lt;/h2&gt;
            &lt;/Social&gt;
          &lt;/Hide&gt;
          &lt;Hide&gt;
            &lt;Social variants={titleAnim}&gt;
              &lt;Circle /&gt;
              &lt;h2&gt;Send me a message&lt;/h2&gt;
            &lt;/Social&gt;
          &lt;/Hide&gt;
          &lt;Hide&gt;
            &lt;Social variants={titleAnim}&gt;
              &lt;Circle /&gt;
              &lt;h2&gt;Drop an email.&lt;/h2&gt;
            &lt;/Social&gt;
          &lt;/Hide&gt;
        &lt;/div&gt;
      &lt;/ContactStyle&gt;
    );
  };
  
  
  
  export default ContactUs;
  </code></pre>