Javascript 使用路由器时，响应页面不自动刷新

我一直在做我的第一个React项目，并使用React路由器导航到不同的页面。虽然我已经实现了功能，但我发现每当我按下链接（例如下面代码中的About或Shop）加载内容时，我都必须手动刷新页面（使用F5）

这是我的密码

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;

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;

import React from "react";

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

export default About;

import React from "react";

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

从“React”导入React；
从“/Nav”导入Nav；
从“/Shop”导入店铺；
从“/About”导入关于；
从“/Home”导入主页；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
导入“./App.css”；
函数App（）{
返回(
);
}
导出默认应用程序；

Nav.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;

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;

import React from "react";

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

export default About;

import React from "react";

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

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Link}；
导入“./App.css”；
函数Nav（）{
返回(
阿迪菲耶

关于
商店

);
}
导出默认导航；

关于.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;

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;

import React from "react";

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

export default About;

import React from "react";

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

从“React”导入React；
函数About（）{
返回(
关于页面
);
}
导出默认值约为；

Shop.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;

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;

import React from "react";

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

export default About;

import React from "react";

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

从“React”导入React；
功能商店（）{
返回(
工作页
);
}

出口默认商店

---

提前感谢

从Nav.js中删除路由器。当您在app.js中定义路由时，它已经起到了作用

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

关于
商店