title: How to avoid reloading the entire app when using Nav.Link from React-Bootstrap?
body: <p>When I use the following link, my React app works as intended, meaning if I click a link, the app does not entirely reload but just changes its front end appearance.</p>
  <pre><code>&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
  </code></pre>
  <p>Now I want to use a Navbar from React-Bootstrap. However, if I click the Navbar, my entire web app reloads which I don't want.</p>
  <p>This is I think the relevant part of my code:</p>
  <pre><code>  &lt;Router&gt;
  
  &lt;Navbar bg=&quot;dark&quot; variant=&quot;dark&quot;&gt;
    &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
    &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
      &lt;Nav className=&quot;mr-auto&quot;&gt;
        &lt;Nav.Link to=&quot;/about&quot;&gt;Page 1&lt;/Nav.Link&gt;
        &lt;Nav.Link href=&quot;/about2&quot;&gt;Page 2&lt;/Nav.Link&gt;
      &lt;/Nav&gt;
    &lt;/Navbar.Collapse&gt;
  &lt;/Navbar&gt;
  
  &lt;hr /&gt;
  
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/about&quot;&gt;
              &lt;About /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/about2&quot;&gt;
              &lt;About /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/dashboard&quot;&gt;
              &lt;Dashboard /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
           
      &lt;/Router&gt;
  </code></pre>
  <p>When I use &quot;to&quot;, it doesn't even work at all. When I use &quot;href&quot;, the reference works, but the entire web app reloads - this is not really what I want. How can I fix this? Thanks in advance!</p>