时间戳

首页 > 解决方案 > 使用路由器时反应页面不会自动刷新

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

问题描述

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

这是我的代码

应用程序.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;

导航.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;

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

导出默认店铺；

提前致谢

标签： javascriptreactjs

解决方案

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

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

推荐阅读