В реакции Router я не могу изменить вид, но меняется только URL

Question

Пожалуйста, скажите мне, что не так в этом, когда я нажимаю на навигационную ссылку, URL-адрес меняется, но содержимое не меняется, я пытаюсь всеми способами, но не могу выяснить проблему, пожалуйста, посмотрите на это

Приложение. js

import React, { Component } from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';

class App extends Component {
  render(){
    return (
      <React.Fragment>
          <div id="page-wrapper">
          <Router>
            <Nav />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/about" exact component={About} />
              <Route path="/contact" exact component={Contact} />
              <Route ><Default /></Route>

            </Switch>
            <Footer />
          </Router>
          </div>
      </React.Fragment>
    );
  }
}

export default App;

Мой файл ссылок, т. Е. Панель навигации

<Link to="/">
     <li className="nav-item">HOME</li>
 </Link>
 <Link to="/about">
     <li className="nav-item">About</li>
 </Link>

Заранее спасибо

Answer 1

Перемещение вашего BrowserRouter в index.js, кажется, работает в моем конце.

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Затем удалите <Router> из вашего кода.