React Route не отображает содержимое

Question

Я изучаю маршрут реакции. Я создал несколько компонентов и создал строку меню, чтобы связать эти компоненты, каждый из которых называется Home, About и Counter, однако, когда я щелкаю по элементу меню, он меняет URL-адрес, но содержимое не отображается, но если я обновляю страница и показывает точное содержание. Я надеюсь, что кто-то знает, что происходит и поможет мне, я был бы очень признателен за ваше время. Большое вам спасибо!

Мой код здесь:

App.jsx

import React, { Component } from "react";
import Counters from "./components/counters";
import NavBar from "./components/navbar";
import Home from "./components/home";
import About from "./components/about";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import Route from "react-router-dom/Route";

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = value => {
    const incrementCounters = [...this.state.counters];
    const index = incrementCounters.indexOf(value);
    incrementCounters[index].value++;
    this.setState({ counters: incrementCounters });
  };
  handleDecrement = value => {
    const decrementCounters = [...this.state.counters];
    const index = decrementCounters.indexOf(value);
    decrementCounters[index].value--;
    this.setState({ counters: decrementCounters });
  };
  handleDelete = id => {
    const deleteCounters = this.state.counters.filter(ccc => ccc.id !== id);
    this.setState({ counters: deleteCounters });
  };
  handleReset = () => {
    const resetCounters = this.state.counters.map(counter => {
      counter.value = 0;
      return counter;
    });
    this.setState({ counters: resetCounters });
  };
  render() {
    return (
      <React.Fragment>
        <main className="container">
          <NavBar
            totalCounters={
              this.state.counters.filter(ccc => ccc.value > 0).length
            }
          />
          <Router>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route
                path="/counter"
                render={counters => (
                  <Counters
                    {...counters}
                    counters={this.state.counters}
                    onIncrement={this.handleIncrement}
                    onDecrement={this.handleDecrement}
                    onDelete={this.handleDelete}
                    onReset={this.handleReset}
                  />
                )}
              />
            </Switch>
          </Router>
        </main>
      </React.Fragment>
    );
  }
}
export default App;

navbar.jsx

import React, { Component } from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
class NavBar extends Component {
  render() {
    return (
      <Router>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <NavLink to="/" className="navbar-brand">
            Navbar
            <span className="badge m-2 badge-danger">
              {this.props.totalCounters}
            </span>
          </NavLink>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>

          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item active">
                <NavLink to="/" className="nav-link" href="">
                  Home <span className="sr-only">(current)</span>
                </NavLink>
              </li>

              <li className="nav-item">
                <NavLink to="/about" className="nav-link">
                  About
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/counter" className="nav-link" href="#">
                  Counter
                </NavLink>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link disabled"
                  href="#"
                  tabIndex="-1"
                  aria-disabled="true"
                >
                  Disabled
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </Router>
    );
  }
}
export default NavBar;