Navbar Router not working

Hi, I am trying to get this fixed Navbar to work, however I am not managing to make the router work. I think something is wrong with my code or maybe the version of the router... Does anyone have a clue ? thank you

NavBar.js **

import React from 'react';
import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
// import img from './swapit.svg'

class FixedNavbarExample extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          collapse: false,
      };
      this.onClick = this.onClick.bind(this);
  }

  onClick() {
        this.setState({
        collapse: !this.state.collapse,
      });
  }

  render() {
    const bgPink = {backgroundColor: 'blue'}
    const container = {height: 1300}
    return(
  <div>
    <Router>
      <header>
        <MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
          <MDBNavbarBrand href="/">
             {/* <img src="swapit.svg"></img> */}
          </MDBNavbarBrand>
          <MDBNavbarToggler onClick={ this.onClick } />
          <MDBCollapse isOpen = { this.state.collapse } navbar>
            <MDBNavbarNav right>
              <MDBNavItem active>
                  <MDBNavLink to="/">Home</MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                  <MDBNavLink to="/login">Login</MDBNavLink>
              </MDBNavItem>
              <MDBNavItem>
                  <MDBNavLink to="/register">Register</MDBNavLink>
              </MDBNavItem>
            </MDBNavbarNav>
          </MDBCollapse>
        </MDBNavbar>
      </header>
    </Router>

  </div>
    );
  }
}

export default FixedNavbarExample;

** App.js **

import "./App.css";
import NavBar from "./components/NavBar";
import { BrowserRouter as BrowserRouter, Switch, Route } from "react-router-dom";
import { Home } from "./components/Pages/Home";
import { Login} from "./components/Pages/Login";
import { Register } from "./components/Pages/Register";

function App() {
  return (
<>
<BrowserRouter>
    <NavBar />

    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
      </Switch>
    </div>
    </BrowserRouter>
</>
  );
}

export default App;

**