Selesai: penghala tindak balas activeClassName

Masalah utama yang berkaitan dengan activeClassName dalam React Router ialah ia tidak mengemas kini kelas aktif secara automatik apabila laluan berubah. Ini bermakna pembangun mesti mengemas kini kelas aktif secara manual apabila laluan berubah, yang boleh memakan masa dan terdedah kepada ralat. Selain itu, jika berbilang laluan bersarang antara satu sama lain, ia boleh menjadi sukar untuk menjejaki laluan mana yang aktif pada masa ini dan kelas yang perlu digunakan pada setiap elemen.

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. The komponen digunakan untuk mencipta penghala dalam React yang membolehkan pengguna menavigasi antara halaman yang berbeza.

2. The komponen digunakan untuk membuat pautan yang apabila diklik, akan membawa pengguna ke halaman yang dinyatakan dalam atribut "kepada" (dalam kes ini, "/about").

3. Atribut activeClassName menentukan kelas yang perlu digunakan apabila pautan aktif (dalam kes ini, "aktif").

Apa itu NavLink

NavLink ialah komponen React yang digunakan dalam React Router untuk mencipta pautan navigasi antara laluan berbeza dalam aplikasi. Ia serupa dengan komponen Pautan, tetapi ia menambahkan atribut penggayaan pada elemen yang diberikan apabila ia sepadan dengan URL semasa. NavLink juga menyediakan prop activeClassName yang boleh digunakan untuk menggunakan nama kelas apabila laluan pautan aktif.

atribut activeClassName

Atribut activeClassName dalam React Router digunakan untuk menentukan nama kelas yang akan digunakan pada elemen apabila ia sepadan dengan URL semasa. Ini berguna untuk menggayakan pautan atau item navigasi apabila ia sepadan dengan laluan semasa. Ia juga boleh digunakan untuk menambah penggayaan tambahan pada elemen yang tidak berkaitan secara langsung dengan penghalaan, seperti menyerlahkan tab yang sedang aktif dalam bar navigasi.

Mengapa activeClassName tidak akan berfungsi

ActiveClassName ialah ciri Penghala React yang membolehkan anda menambah kelas pada pautan aktif dalam menu navigasi. Malangnya, ia tidak akan berfungsi dalam React Router kerana ia bergantung pada API sejarah penyemak imbas, yang tidak tersedia dalam React Router. Ini bermakna React Router tidak dapat mengesan apabila pengguna telah mengklik pada pautan dan menggunakan activeClassName dengan sewajarnya.