React router V5 memperbarui URL tetapi tidak menyegarkan halaman

Question

react router tidak memperbarui tampilan tetapi mengubah 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;

Dan ini adalah App.js saya

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;

Apa yang telah saya coba:

1. Saya telah mencoba mengekspor semua komponen yang saya render di dalam Router dengan withRouter. masih halaman tidak memuat ulang.
2. Saya telah mencoba membuat komponen router menjadi komponen tingkat atas tetapi tidak berhasil.
3. Saya telah mencoba menjadikan item li sebagai tautan, tetapi itu tidak melakukan apa yang saya inginkan.
4. Saya telah mencoba solusi seperti memasukkan sakelar di atas tag tautan, dan menghapus sakelar dari tag router tetapi tetap tidak ada yang berhasil.
5. Saya juga mencoba mengganti urutan rute untuk membuat rumah di ujung rute. Tetap tidak ada.

Answer 1

Silakan coba dua hal ini:

• Pertama-tama, pastikan urutan Rute Anda adalah sebagai berikut:

<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>

• Hapus <Router>bagian dalam Anda <Nav>dan bungkus semuanya <App>dengan <Router>... Seperti ini:

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>
  );
}

Saya pikir perlu dicatat bahwa menurut pengalaman saya, saya menyadari bahwa <Router>hanya mengharapkan 1 anak. jadi dalam kasus Anda, Anda menggunakan <Router>dua kali.

---

Saya mungkin juga ingin menyederhanakannya lebih jauh dengan meletakkan <Router>file di index.js Anda:

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