title: ReactJS Bootstrap Navbar and Routing not working together
body: <p>I am trying to create a simple Webapp using ReactJS, and I wanted to use the <code>Navbar</code> provided by React-Bootstrap. </p>
  
  <p>I created a <code>Navigation.js</code> file containing a class <code>Navigation</code> to separate the <code>Navbar</code> and the Routing from the <code>App.js</code> file. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?</p>
  
  <p>Navigation.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
  import { Switch, Route } from 'react-router-dom';
  import { Home } from './Page';
  
  class Navigation extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;Navbar&gt;
                          &lt;Navbar.Brand href="/"&gt;React-Bootstrap&lt;/Navbar.Brand&gt;
                          &lt;Navbar.Collapse&gt;
                              &lt;Nav className="mr-auto"&gt;
                                  &lt;NavItem eventkey={1} href="/"&gt;
                                      &lt;Nav.Link href="/"&gt;Home&lt;/Nav.Link&gt;
                                  &lt;/NavItem&gt;
                              &lt;/Nav&gt;
                              &lt;Form inline&gt;
                                  &lt;FormControl type="text" placeholder="Search" className="mr-sm-2" /&gt;
                                  &lt;Button variant="outline-success"&gt;Search&lt;/Button&gt;
                              &lt;/Form&gt;
                          &lt;/Navbar.Collapse&gt;
                      &lt;/Navbar&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path='/' component={Home} /&gt;
                          &lt;Route render={function () {
                              return &lt;p&gt;Not found&lt;/p&gt;
                          }} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Navigation;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Navigation from './components/routing/Navigation';
  
  
  
  class App extends Component {
    render() {
      return (
        &lt;div id="App"&gt;
          &lt;Navigation /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I tried using a <code>NavItem</code> containing a <code>LinkContainer</code> from <code>react-router-bootstrap</code> already, which led to the same result. </p>
  
  <p>Just for completeness, Page.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  
  export const Page = ({ title }) =&gt; (
      &lt;div className="App"&gt;
        &lt;div className="App-header"&gt;
          &lt;h2&gt;{title}&lt;/h2&gt;
        &lt;/div&gt;
        &lt;p className="App-intro"&gt;
          This is the {title} page.
        &lt;/p&gt;
        &lt;p&gt;
          &lt;Link to="/"&gt;Home&lt;/Link&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;Link to="/about"&gt;About&lt;/Link&gt;
        &lt;/p&gt;
        &lt;p&gt;
          &lt;Link to="/settings"&gt;Settings&lt;/Link&gt;
        &lt;/p&gt;
      &lt;/div&gt;
  );
  
  
  export const About = (props) =&gt; (
      &lt;Page title="About"/&gt;
  );
  
  export  const Settings = (props) =&gt; (
      &lt;Page title="Settings"/&gt;
  );
  
  export const Home = (props) =&gt; (
      &lt;Page title="Home"/&gt;
  );
  </code></pre>