title: Component is opening in custom navbar built on material UI in react.js
body: <p>I have created custom navbar in react using material ui and now I am using react router dom for routing but when Link is clicked this happens</p>
  
  <p><a href="https://i.stack.imgur.com/6DYrr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6DYrr.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/TUlPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TUlPR.png" alt="enter image description here"></a></p>
  
  <p>My code is below:</p>
  
  <pre><code>    &lt;Grid container direction="row" justify="space-evenly" alignItems="center"&gt;
      &lt;Grid className="pt-4 navlink"&gt;&lt;Button  className="navlink" href="#How"&gt;How It Works&lt;/Button&gt;&lt;/Grid&gt;
      &lt;Grid className="pt-4 navlink"&gt;&lt;Button  className="navlink" href="#Contact"&gt;Contact-Us&lt;/Button&gt;&lt;/Grid&gt;
      &lt;Grid className="pt-4 navlink"&gt;&lt;Button  className="navlink" href="#Home"&gt;Home&lt;/Button&gt;&lt;/Grid&gt;
      &lt;Router&gt;
      &lt;Link to="/signin"&gt;&lt;Grid className="pt-4 navlink"&gt;&lt;Button  className="navlink" href="/signin"&gt;Sign-in&lt;/Button&gt;&lt;/Grid&gt;&lt;/Link&gt;
      &lt;Switch&gt;
          &lt;Route component={Signin} path="/signin"/&gt;
          &lt;Route component={Signup} path="/signup"/&gt;
      &lt;/Switch&gt;
      &lt;/Router&gt;
      &lt;Grid className="pt-4 navlink"&gt;&lt;Button  className="navlink" href="#"&gt;Sign-up&lt;/Button&gt;&lt;/Grid&gt;
    &lt;/Grid&gt;
  </code></pre>