cari

Rumah  >  Soal Jawab  >  teks badan

Paparkan semula komponen Penghala Reaksi dengan mengklik pautan sendiri.

<p>Saya menggunakan <code>react-router-dom</code> <h1>kod</h1> <pre class="brush:php;toolbar:false;"><NavLink to="/pathOne" className="ripple">label1</NavLink> <NavLink to="/pathTwo" className="ripple">label2</NavLink></pre> <h1>Soalan</h1> <p>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. </p><p>Adakah terdapat cara untuk memaksa elemen laluan dipaparkan semula dengan mengklik pada pautan aktif? </p><p>Saya boleh memuat semula keseluruhan halaman jika atribut muat semulaDocument telah ditetapkan, tetapi itu bukan pilihan yang berdaya maju. </p><p><kod></kod></p>
P粉295728625P粉295728625516 hari yang lalu509

membalas semua(1)saya akan balas

  • P粉432906880

    P粉4329068802023-07-28 12:05:00

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

    balas
    0
  • Batalbalas