title: React-bootstrap navbar with React Router
body: <p>I have looked at various answers related to the subject, but the issue seem to persist. Would be happy if some concrete solution is available.</p>
  <p>I am trying to render a navbar using react-bootstrap and trying to route it using react-router.  It does not seem to work on the first click. When the page is forced the components get loaded.</p>
  <p>Here are the relevant files.</p>
  <p>MyAppNavbar,js</p>
  <pre><code>import React, { Component } from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { Nav, NavDropdown, Navbar, Container, Alert } from &quot;react-bootstrap&quot;;
  import { Link } from 'react-router-dom';
  import Routes from './Routes';
  
  class MyAppNavbar extends Component {
  
      render() {
          return (
              &lt;React.Fragment&gt;
                  &lt;Navbar collapseOnSelect expand=&quot;lg&quot; bg=&quot;dark&quot; fixed=&quot;top&quot; variant=&quot;dark&quot; &gt;
                      &lt;Navbar.Brand as={Link} to=&quot;/&quot; &gt;React-Bootstrap&lt;/Navbar.Brand&gt;
                      &lt;Navbar.Toggle aria-controls=&quot;responsive-navbar-nav&quot; /&gt;
                      &lt;Navbar.Collapse id=&quot;responsive-navbar-nav&quot;&gt;
                          &lt;Nav activeKey={window.location.pathname} variant=&quot;pills&quot;&gt;
                              &lt;Nav.Item href=&quot;/&quot;&gt;
                                  &lt;Nav.Link as={Link} to=&quot;/&quot; eventKey=&quot;/home&quot; title=&quot;Home&quot;&gt;
                                      Home
                              &lt;/Nav.Link&gt;
                              &lt;/Nav.Item&gt;
                              &lt;Nav.Item&gt;
                                  &lt;Nav.Link as={Link} to=&quot;/about&quot; title=&quot;About&quot;&gt;
                                      About
                              &lt;/Nav.Link&gt;
                              &lt;/Nav.Item&gt;
                              &lt;Nav.Item&gt;
                                  &lt;Nav.Link as={Link} to=&quot;/category&quot; eventKey=&quot;category&quot; title=&quot;Category&quot;&gt;
                                      Category
                              &lt;/Nav.Link&gt;
                              &lt;/Nav.Item&gt;
  
                              &lt;NavDropdown title=&quot;Products&quot; id=&quot;nav-dropdown&quot;&gt;
                                  &lt;NavDropdown.Item&gt;
                                      Basic Pricing
                              &lt;/NavDropdown.Item&gt;
  
                                  &lt;NavDropdown.Item&gt;
                                      Corporate
                              &lt;/NavDropdown.Item&gt;
                                  &lt;NavDropdown.Divider /&gt;
  
                                  &lt;NavDropdown.Item&gt; Enterprise pricing
                              &lt;/NavDropdown.Item&gt;
                              &lt;/NavDropdown&gt;
                          &lt;/Nav&gt;
                      &lt;/Navbar.Collapse&gt;
                  &lt;/Navbar&gt;
                  &lt;Routes /&gt;
              &lt;/React.Fragment&gt;
          );
      }
  }
  export default MyAppNavbar;
  </code></pre>
  <p>Routes.js</p>
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  import Category from './Category';
  import Products from './Products';
  import Home from &quot;./Home&quot;;
  import About from &quot;./About&quot;;
  import NotFound from './NotFound'
  
  const Routes = () =&gt;
      &lt;Router&gt;
          &lt;Switch&gt;
              &lt;Route exact path='/'&gt;
                  &lt;Home /&gt;
              &lt;/Route&gt;
              &lt;Route path='/about'&gt;
                  &lt;About /&gt;
              &lt;/Route&gt;
              &lt;Route path='/category'&gt;
                  &lt;Category /&gt;
              &lt;/Route&gt;
              &lt;Route path='/products'&gt;
                  &lt;Products /&gt;
              &lt;/Route&gt;
              &lt;Route &gt;
                  &lt;NotFound /&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
  
  export default Routes;
  </code></pre>
  <p>App.js</p>
  <pre><code>import React, { Component } from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import Routes from './website/Routes';
  import MyAppNavbar from &quot;./website/MyAppNavbar&quot;;
  
  const App = () =&gt; 
      &lt;React.Fragment&gt;
          &lt;MyAppNavbar /&gt;
          &lt;Routes/&gt;
      &lt;/React.Fragment&gt;
  export default App;
  </code></pre>
  <p>index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App/&gt;
      &lt;/BrowserRouter&gt;, 
      document.getElementById('root')
  );
  </code></pre>