Cangkuk penghala reaksi

React Router V5 memperkenalkan mekanisme cangkuk yang kuat, menyediakan empat cangkuk penghalaan yang mudah, memudahkan pengurusan penghalaan. Artikel ini dengan cepat akan bermula dengan mod baru React Router V5, mula -mula memperkenalkan mod rendering routing baru, dan kemudian menyelidiki penggunaan setiap cangkuk.

React Router Sebelum V5

 // membuat laluan dan dapatkan atribut laluan<route component="{Home}" path="/"></route>

// lulus sifat tambahan<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile> } /></route>

Apabila menggunakan sintaks component , sifat penghalaan ( match , location , dan history ) secara tersirat diserahkan kepada komponen. Tetapi jika anda perlu lulus sifat tambahan, anda mesti menggunakan harta render . Harus diingat bahawa menambahkan fungsi inline ke sintaks component akan menyebabkan komponen untuk diperbaiki setiap kali ia diberikan.

React Router selepas v5

<route path="/"><home></home></route>

Komponen Home tidak lagi secara tersirat menerima sifat penghalaan. Walau bagaimanapun, anda boleh menambah sebarang sifat tambahan ke komponen Home tanpa mengubahsuai Route sendiri. Elakkan masalah komponen pengangkatan setiap kali mereka memberikan, yang merupakan reka bentuk API yang lebih ringkas dan cekap.

Oleh kerana sifat penghalaan tidak lagi tersirat, bagaimana untuk mengakses match , history , atau location ? Adakah saya perlu membungkus semua komponen dengan withRouter ? Di sinilah cangkuk itu bermain.

Perhatikan bahawa cangkuk diperkenalkan dalam React 16.8, jadi React diperlukan untuk digunakan.

Hook useHistory

• Menyediakan akses kepada atribut history dalam Router React.
• Titik kepada kebergantungan pakej history yang digunakan oleh laluan.
• Ia digunakan terutamanya untuk penghalaan programatik melalui fungsi, seperti push , replace , dll.

 import {useHistory} dari 'react-router-dom';

fungsi rumah () {
  const history = useHistory ();
  kembali <button onclick="{()">sejarah.push ('/profil')}> profil</button> ;
}

cangkuk useLocation

• Menyediakan akses kepada atribut location dalam penghala React.
• Sama seperti window.location penyemak imbas, tetapi ia mewakili status penghalaan dan lokasi dan boleh diakses di mana -mana sahaja.
• Terutamanya digunakan untuk mengakses parameter pertanyaan atau rentetan penghalaan lengkap.

 import {uselocation} dari 'react-router-dom';

profil fungsi () {
  const location = uselocation ();
  useeffect (() => {
    const currentPath = location.pathName;
    const searchParams = urlSearchParams baru (location.search);
    // ... Gunakan CurrentPath dan SearchParams
  }, [lokasi]);
  Kembali<p> Profil</p> ;
}

Oleh kerana harta location tidak berubah, useEffect memanggil fungsi setiap kali perubahan laluan, yang bagus untuk memanipulasi parameter carian atau laluan semasa.

useParams Hook

• Menyediakan akses kepada parameter dalam URL.
• Ciri ini sebelum ini hanya dilaksanakan melalui match.params .

 import {useParams, route} dari 'react-router-dom';

profil fungsi () {
  const {name} = useParams ();
  Kembali<p> Profil {Name}</p> ;
}

fungsi papan pemuka () {
  Kembali (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Profil Ann
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch Hook

• Menyediakan akses kepada objek match .
• Sekiranya tidak ada hujah, perlawanan terdekat dalam komponen atau komponen induknya dikembalikan.
• Terutamanya digunakan untuk membina laluan bersarang.

 import {userouteMatch, route} dari 'react-router-dom';

fungsi auth () {
  const match = userOuteMatch ();
  Kembali (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch juga boleh digunakan untuk mengakses objek match tanpa membuat Route dengan lulus parameter location .

Sebagai contoh, katakan anda perlu membuat profil anda dalam /profile , dan jika URL mengandungi nama orang ( /profile/dan atau /profile/ann ), menjadikan profil orang lain. Jika anda tidak menggunakan cangkuk, anda perlu menulis Switch , senaraikan dua laluan dan menyesuaikan dengan alat peraga. Tetapi sekarang, menggunakan Hook boleh melakukan ini:

 import {route, browserrouter sebagai penghala, pautan, useroutematch} dari 'react-router-dom';

profil fungsi () {
  const Match = UserOuteMatch ('/profil/: nama');
  Perlawanan balik?<p> {match.params.name} 's Profil</p> :<p> Profil saya sendiri</p> ;
}

Eksport App Fungsi Lalai () {
  Kembali (
    <router>
      <nav>
        <link to="/profile">Profil saya
        <br>
        <link to="{`/profile/ann`}">Profil Ann
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

Anda juga boleh lulus semua sifat Route seperti exact atau sensitive sebagai objek ke useRouteMatch .

Meringkaskan

Hook dan Route eksplisit sendiri mempunyai kelebihan tersembunyi. Cangkuk ini membantu mengelakkan banyak kekeliruan dan kerumitan yang muncul dalam mod awal, mengurangkan kesilapan manusia, menjadikan kod penghalaan lebih mudah untuk dikekalkan, dan lebih mudah untuk menaik taraf ke versi Router React baru.

Atas ialah kandungan terperinci Cangkuk penghala reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!