Paparkan semula komponen Penghala Reaksi dengan mengklik pautan sendiri.

Question

Saya menggunakan react-router-dom

kod

<NavLink to="/pathOne" className="ripple">label1</NavLink>
<NavLink to="/pathTwo" className="ripple">label2</NavLink>

Soalan

Apabila anda mengklik satu pautan atau pautan lain, komponen Laluan dipaparkan seperti yang dijangkakan. Walau bagaimanapun, jika "/pathOne" aktif dan saya klik padanya semula, tiada apa yang berlaku.

Adakah terdapat cara untuk memaksa elemen laluan dipaparkan semula dengan mengklik pada pautan aktif?

Saya boleh memuat semula keseluruhan halaman jika atribut muat semulaDocument telah ditetapkan, tetapi itu bukan pilihan yang berdaya maju.

Answer 1

Jika apa yang anda mahukan hanyalah komponen laluan untuk membuat semula setiap kali pautan ke laluannya diklik, maka hanya minta komponen tersebut memanggil rujukan objek useLocation hook. Each time the link is clicked a new location object reference is created. The new location sudah cukup untuk mencetuskan komponen menggunakannya untuk dipaparkan semula.

Contoh:

const PathOne = () => {
  useLocation();

  useEffect(() => {
    console.log("PathOne rerender");
  });

  return <h1>PathOne</h1>;
};

const PathTwo = () => {
  useEffect(() => {
    console.log("PathTwo rerender");
  });

  return <h1>PathTwo</h1>;
};

function App() {
  return (
    <div className="App">
      <NavLink to="/pathOne" className="ripple">
        label1
      </NavLink>
      <NavLink to="/pathTwo" className="ripple">
        label2
      </NavLink>
      <Routes>
        <Route path="/pathOne" element={<PathOne />} />
        <Route path="/pathTwo" element={<PathTwo />} />
      </Routes>
    </div>
  );
}