Terangkan penggunaan komponen yang berbeza dalam penghala React (mis., & Lt; Browserrouter & gt;, & lt; route & gt;, & lt; link & gt;, & lt; navlink & gt;, & lt; switch & gt;).

Artikel ini membincangkan komponen router React seperti & lt; Browserrouter & gt;, & lt; route & gt;, & lt; link & gt;, & lt; Navlink & gt;, dan & lt; switch & gt;, menerangkan peranan mereka dalam menguruskan routing dalam aplikasi reaksi.

Terangkan penggunaan komponen yang berbeza dalam Router React (misalnya, , , , , ).

React Router adalah perpustakaan yang popular untuk mengendalikan penghalaan dalam aplikasi React. Berikut adalah penjelasan terperinci mengenai komponen yang berbeza yang digunakan dalam Router React:

• <browserrouter></browserrouter> : Ini adalah komponen penghala utama untuk penghala React. Ia menggunakan API Sejarah HTML5 untuk memastikan UI anda selaras dengan URL. Ia biasanya digunakan dalam aplikasi web yang disampaikan dari pelayan yang mampu mengendalikan permintaan dinamik. Komponen <browserrouter></browserrouter> membungkus seluruh aplikasi anda, menyediakan konteks penghalaan kepada semua anaknya.
• <route></route> : Komponen ini digunakan untuk menjadikan UI apabila URL tertentu sepadan dengan laluan yang ditentukan. Ia boleh digunakan untuk membuat komponen secara kondusif berdasarkan URL semasa. <route></route> boleh digunakan dengan cara yang berbeza, seperti membuat komponen secara langsung, atau lulus kanak -kanak yang selalu diberikan, atau menggunakan prop render untuk logik yang lebih kompleks.
• <link> : Komponen ini digunakan untuk membuat pautan dalam aplikasi anda. Ia sama dengan tag HTML <a></a> tetapi berfungsi dalam konteks Router React, memastikan bahawa navigasi berlaku tanpa tambah nilai halaman penuh. Ia digunakan untuk navigasi mudah antara laluan yang berbeza.
• <navlink></navlink> : Versi khas <link> yang menambah atribut gaya ke elemen yang diberikan apabila ia sepadan dengan URL semasa. Ia amat berguna untuk membuat menu navigasi di mana anda ingin menyerlahkan pautan aktif.
• <switch></switch> : Komponen ini digunakan untuk mengumpulkan komponen <route></route> bersama -sama. Ia menjadikan anak pertama <route></route> atau <redirect></redirect> yang sepadan dengan lokasi. Ini berguna untuk penghalaan eksklusif, di mana anda ingin memberikan hanya satu laluan pada satu masa.

Apakah perbezaan utama antara dan dalam Router React?

Perbezaan utama antara <browserrouter></browserrouter> dan <hashrouter></hashrouter> dalam Router React terutamanya berkaitan dengan bagaimana mereka mengendalikan URL dan keserasian mereka dengan persekitaran pelayan yang berbeza:

• Pengendalian URL :

  • <browserrouter></browserrouter> Menggunakan API Sejarah HTML5 untuk memastikan UI diselaraskan dengan URL. Ia memanipulasi timbunan sejarah penyemak imbas, yang membolehkan URL bersih seperti /about .
  • <hashrouter></hashrouter> Menggunakan bahagian hash URL (iaitu, bahagian selepas # ) untuk mengekalkan UI selaras dengan URL. Ini menghasilkan URL seperti /#/about .

• Keserasian Pelayan :

  • <browserrouter></browserrouter> memerlukan konfigurasi sisi pelayan untuk mengendalikan permintaan dinamik. Jika pengguna menavigasi terus ke URL atau menyegarkan halaman, pelayan perlu dikonfigurasi untuk menyampaikan fail index.html yang sama untuk semua laluan.
  • <hashrouter></hashrouter> tidak memerlukan sebarang konfigurasi sisi pelayan kerana pelayan hanya perlu menyampaikan fail index.html untuk laluan akar. Bahagian hash URL dikendalikan sepenuhnya di sebelah pelanggan.

• Gunakan Kes :

  • <browserrouter></browserrouter> lebih disukai untuk aplikasi web yang disampaikan dari pelayan yang mampu mengendalikan permintaan dinamik, seperti pelayan Node.js atau pelayan dengan peraturan penulisan semula URL yang betul.
  • <hashrouter></hashrouter> berguna untuk laman web statik atau ketika menggunakan pelayan yang tidak dapat mengendalikan permintaan dinamik, seperti halaman GitHub.

Bagaimanakah dan digunakan bersama untuk menguruskan penghalaan dalam aplikasi React?

<route></route> dan <switch></switch> boleh digunakan bersama -sama untuk menguruskan penghalaan dalam aplikasi React dengan mengumpulkan laluan dan memastikan bahawa hanya satu laluan yang diberikan pada satu masa. Inilah cara mereka bekerjasama:

• Menggunakan <route></route> : Setiap <route></route> komponen menentukan laluan dan komponen untuk menjadikan apabila laluan itu sepadan dengan URL semasa. Contohnya:

   <code class="jsx"><route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route></code>

• Menggunakan <switch></switch> : Komponen <switch></switch> digunakan untuk membungkus komponen . Ia memastikan bahawa hanya pemadanan pertama <route></route> diberikan. Ini berguna untuk mengendalikan laluan bersarang atau apabila anda ingin memberikan hanya satu laluan pada satu masa. Contohnya:

   <code class="jsx"><switch> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> <route component="{NotFound}"></route> </switch></code>

  Dalam contoh ini, komponen <switch></switch> akan menjadikan laluan sepadan pertama. Jika tiada laluan yang sepadan, ia akan menjadikan komponen NotFound .

Dengan menggunakan <route></route> dan <switch></switch> bersama -sama, anda boleh membuat sistem penghalaan yang mantap yang mengendalikan laluan yang berbeza dan memastikan bahawa hanya komponen yang sesuai diberikan berdasarkan URL semasa.

Apakah faedah menggunakan versus untuk navigasi dalam router React?

Kedua -dua <link> dan <navlink></navlink> digunakan untuk navigasi dalam Router React, tetapi mereka menawarkan manfaat yang berbeza:

• <link> :

  • Navigasi Asas : <link> digunakan untuk navigasi mudah antara laluan yang berbeza. Ia sama dengan tag HTML <a></a> tetapi berfungsi dalam konteks Router React.
  • Tiada gaya tambahan : <link> tidak secara automatik menambah gaya untuk menunjukkan keadaan aktif pautan. Anda perlu menambah gaya secara manual untuk menyerlahkan pautan aktif.
  • Gunakan Kes : <link> sesuai untuk navigasi umum di mana anda tidak perlu menyerlahkan pautan aktif.

• <navlink></navlink> :

  • Gaya Negeri Aktif : <navlink></navlink> secara automatik menambah atribut gaya ke elemen yang diberikan apabila ia sepadan dengan URL semasa. Ini menjadikannya mudah untuk menyerlahkan pautan aktif dalam menu navigasi.

  • Gaya Aktif Disesuaikan : Anda boleh menyesuaikan gaya aktif menggunakan prop activeClassName dan activeStyle . Contohnya:

     <code class="jsx"><navlink to="/about" activeclassname="active">About</navlink></code>

  • Gunakan kes : <navlink></navlink> amat berguna untuk membuat menu navigasi di mana anda ingin secara visual menunjukkan pautan yang sedang aktif.

Ringkasnya, <link> sesuai untuk navigasi asas tanpa gaya keadaan aktif automatik, sementara <navlink></navlink> bermanfaat untuk menu navigasi di mana anda ingin menyerlahkan pautan aktif dengan kod tambahan yang minimum.

Atas ialah kandungan terperinci Terangkan penggunaan komponen yang berbeza dalam penghala React (mis., & Lt; Browserrouter & gt;, & lt; route & gt;, & lt; link & gt;, & lt; navlink & gt;, & lt; switch & gt;).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!