使用路由器时反应页面不会自动刷新

Question

I've been working on my first React project and used react-router to navigate to different pages. Although I have reached the functionality, I have found that I have to manually refresh the page (using F5) whenever I press the link (for eg. About or Shop in the following code) to load the content.

Here's my Code

App.js

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

function App() {
    return (
        <Router>
            <div className="App">
                <Nav />
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/shop" component={Shop} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

Nav.js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import "../App.css";

function Nav() {
  return (
    <nav>
      <h3>Adifier</h3>
      <ul className="nav-links">
        <Router>
          <Link to="/about">
            <li>About</li>
          </Link>
          <Link to="/shop">
            <li>Shop</li>
          </Link>
        </Router>
      </ul>
    </nav>
  );
}

export default Nav;

About.js

import React from "react";

function About() {
  return (
    <div className="App">
      <h1>About Page</h1>
    </div>
  );
}

export default About;

Shop.js

import React from "react";

function Shop() {
  return (
    <div className="App">
      <h1>Shop Page</h1>
    </div>
  );
}

export default Shop;

Thanks in advance

Answer 1

Remove Router from Nav.js. It has already served its purpose when you defined routes in app.js

  <ul className="nav-links">
      <Link to="/about">
        <li>About</li>
      </Link>
      <Link to="/shop">
        <li>Shop</li>
      </Link>
  </ul>