Реактив NavLink не работает (не перерисовывает страницы)

Question

Я хотел разместить другое меню на своем веб-сайте, и я решил, что NavBar будет отличным выбором, поскольку он является частью библиотеки реагирования. Я все сделал успешно и интегрировал меню в свой сайт, но потом заметил, что все мои ссылки не работают (кроме кнопок выпадающего меню).

Вот мой код:

App.js

    import React, { Component } from 'react';
    import './App.css';
    import Header from './components/Header/Header.jsx';
    import HeaderTop from './components/HeaderTop/HeaderTop.jsx';
    import Home from './components/Home/Home.jsx';
    import SecondPage from './components/SecondPage/SecondPage.jsx';
    import {BrowserRouter, Route, Switch}from 'react-router-dom';
    import Footer from './components/Footer/Footer.jsx';
    import Menu from './components/Menu/Menu.jsx';

    class App extends Component {
      render() {
        return (

          <div>
          <div>
            <HeaderTop />
            <Menu />
          </div>
            <BrowserRouter>
          <Switch>
            <Route path="/" component={Home} exact/>
            <Route path="/SecondPage" component={SecondPage} exact/>
            </Switch>
          </BrowserRouter>
          <div>

          </div>
          </div>




        );
      }
    }

    export default App;

Menu.jsx

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false,
            isWideEnough: false,
            dropdownOpen: false
        };
    this.onClick = this.onClick.bind(this);
    this.toggle = this.toggle.bind(this);
    }

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

    toggle() {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    render() {
        return (
            <Router>
                <Navbar color="indigo" dark expand="md" scrolling>
                    <NavbarBrand href="/">
                        <strong>HOME</strong>
                    </NavbarBrand>
                    { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                    <Collapse isOpen = { this.state.collapse } navbar>
                        <NavbarNav left>
                          <NavItem active>
                              <NavLink to="/">Home</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="/SecondPage">Features</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="#">Pricing</NavLink>
                          </NavItem>
                          <NavItem>
                              <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                              <DropdownToggle nav caret>Dropdown</DropdownToggle>
                              <DropdownMenu>
                                  <DropdownItem href="/SecondPage">Action</DropdownItem>
                                  <DropdownItem href="#">Another Action</DropdownItem>
                                  <DropdownItem href="#">Something else here</DropdownItem>
                                  <DropdownItem href="#">Something else here</DropdownItem>
                              </DropdownMenu>
                              </Dropdown>
                          </NavItem>
                        </NavbarNav>
                        <NavbarNav right>
                          <NavItem>
                            <form className="form-inline md-form mt-0">
                              <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
                            </form>
                          </NavItem>
                        </NavbarNav>
                    </Collapse>
                </Navbar>
            </Router>
        );
    }
}
export default Menu;

Я использую маршруты '/' и 'SecondPage' для целей тестирования. Если я изменю это на это, это будет работать, но не будет работать для меню. Я довольно новичок в React, поэтому любая помощь будет оценена по достоинству! Заранее спасибо!