javascript - 在反应路由器中，我无法更改视图，但只有 url 正在更改

Question

请告诉我这有什么问题，当我点击导航链接时，网址正在改变但内容没有改变我正在尝试所有方法但无法找出问题，请看看这个

应用程序.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>从您的代码中删除。