ReactJS Bootstrap Navbar and Routing not working together : <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>
