ตอบสนองเราเตอร์ V5 ที่อัปเดต URL แต่ไม่รีเฟรชหน้า

Aug 19 2020

เราเตอร์ตอบสนองไม่ได้อัปเดตมุมมอง แต่เปลี่ยน URL

Navbar.js:

import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Navbar extends React.Component {
  render() {
    return (
      <div className="header">
        <img className="logo" src={logo} alt="logo" />
        <Router>
          <nav>
            <ul className="nav_links">
              <Link to="/">
                <li>Home</li>
              </Link>
              <Link to="/process">
                <li>Process</li>
              </Link>
              <Link to="/career">
                <li>Career</li>
              </Link>
              <Link to="/about">
                <li>About</li>
              </Link>
            </ul>
          </nav>
        </Router>
      </div>
    );
  }
}
export default Navbar;

และนี่คือ App.js ของฉัน

import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Navbar />
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/career" component={Career} />
          <Route path="/notfound" component={notFoundPage} />
        </Switch>
      </Router>
      <Footer />
    </div>
  );
}

export default App;

สิ่งที่ฉันได้ลอง:

  1. ฉันได้ลองส่งออกส่วนประกอบทั้งหมดที่ฉันแสดงภายในเราเตอร์ด้วย withRouter หน้ายังไม่โหลดซ้ำ
  2. ฉันได้พยายามทำให้ส่วนประกอบของเราเตอร์เป็นส่วนประกอบระดับบนสุด แต่ไม่ได้ผล
  3. ฉันได้ลองสร้างรายการ li เป็นลิงก์แล้ว แต่ไม่ได้ทำตามที่ฉันต้องการ
  4. ฉันได้ลองใช้วิธีแก้ปัญหาเช่นรวมสวิตช์ที่ด้านบนของแท็กลิงก์และลบสวิตช์ออกจากแท็กเราเตอร์ แต่ก็ยังไม่ได้ผล
  5. ฉันยังได้ลองสลับลำดับของเส้นทางเพื่อทำให้บ้านอยู่ท้ายสุดของเส้นทาง ยังคงไม่มีอะไร.

คำตอบ

MosiaThabo Aug 19 2020 at 16:50

โปรดลองสองสิ่งนี้:

  • ขั้นแรกให้แน่ใจว่าลำดับเส้นทางของคุณเป็นดังนี้:
<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>
  • ถอด<Router>ภายในของคุณ<Nav>และห่อทุกอย่างไว้ด้านใน<App>ด้วย<Router>... เช่นนี้:
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/career" component={Career} />
            <Route path="/notfound" component={notFoundPage} />
          </Switch>
        <Footer />
      </div>
    </Router>
  );
}

ฉันคิดว่ามันน่าสังเกตว่าจากประสบการณ์ของฉันฉันได้ตระหนักว่า<Router>คาดหวังว่าจะมีลูกเพียง 1 คน ดังนั้นในกรณีของคุณคุณใช้<Router>สองครั้ง


ฉันอาจต้องการทำให้มันง่ายขึ้นโดยใส่<Router>ไฟล์ index.js ของคุณ:

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   containerElement
);