ReactJS Bootstrap Navbar and Routing not working together

First of all, in your snippets it doesn't seem like you're wrapping your code in a Router, so you should make sure that you're doing that inside App or in ReactDOM.render:

import { BrowserRouter } from 'react-router-dom';ReactDOM.render(  <BrowserRouter>    <App />  </BrowserRouter>,   rootElement  );

Next, your specific problem is that you're rendering react-bootstrap's Nav.Link instead of react-router's Link component, so the router is not picking up your route changes. Fortunately, react-bootstrap provides a render prop in most of its components to specify which component or element you want to render if you don't want the default. Switch to something like this:

import { Switch, Route, Link } from 'react-router-dom';class Navigation extends Component {  render() {    return (      <div>        <div>          <Navbar>            <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>            <Navbar.Collapse>              <Nav className="mr-auto">                <NavItem eventkey={1} href="/">                  <Nav.Link as={Link} to="/" >Home</Nav.Link>                </NavItem>              </Nav>              <Form inline>                <FormControl type="text" placeholder="Search" className="mr-sm-2" />                <Button variant="outline-success">Search</Button>              </Form>            </Navbar.Collapse>          </Navbar>        </div>        <div>          <Switch>            <Route exact path='/' component={Home} />            <Route render={function () {              return <p>Not found</p>            }} />          </Switch>        </div>      </div>    );  }}

For those who have a problem with styling Link component from react-router-dom in react-bootstrap navbar, simply add className="nav-link", like this:

<Link to="/" className="nav-link">Home</Link>

instead of

<Nav.Link href="/">Home</Nav.Link>

import ReactDOM from 'react-dom';import { BrowserRouter } from 'react-router-dom';ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'));

and Navbar.js:

import React from 'react';import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';import {Link} from 'react-router-dom';<Nav className="ml-auto"><NavItem>   <Link className="nav-link"   to="/">Home</Link> </NavItem> <NavItem>   <Link  className="nav-link" to="/about">About</Link> </NavItem> <NavItem>    <Link className="nav-link"   to="/contact">Contact</Link> </NavItem> </Nav>

This resolved the: <Link> outside a <Router> error for me.