Manfaat React Router v4 <NavLink> vs <Link>

94

Selain kemampuan untuk menyetel "activeClassName" dan "activeStyle" di NavLink, adakah alasan untuk menggunakan NavLink melalui Link saat membuat link ke rute lain pada elemen non-navigasi (yaitu, bukan navigasi utama di header atau footer) di situs Anda yang tidak membutuhkan status / kelas aktif?

yam55
sumber
4
Saya tidak bisa berkomentar langsung ke TOUMI (karena saya tidak punya 50rep), jadi saya akan menambahkannya di sini. NavLinkmenjaga fokus yang tepat pada halaman untuk aksesibilitas. Saat menggunakan link, fokus awal hilang saat halaman dimuat dan Anda juga akan melihat bahwa tab melalui dropdown juga rusak saat menggunakan Link. NavLink memperbaiki ini.
DJNorris

Jawaban:

137

The dokumentasi resmi jelas:

<NavLink>

Versi khusus <Link>yang akan menambahkan atribut gaya ke elemen yang dirender ketika cocok dengan URL saat ini.

Jadi, jawabannya TIDAK . Tidak ada alasan lain kecuali yang disebutkan.

Abdennour TOUMI
sumber
42

Jika Anda perlu menggunakan atribut gaya atau kelas pada aktif <Link>, Anda dapat menggunakan<NavLink>

Coba lihat contohnya:

Tautan

<Link to="/">Home</Link>

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>
sultan aslam
sumber
7

Komponen Tautan

Ini digunakan untuk membuat tautan yang memungkinkan untuk menavigasi pada URL yang berbeda dan Ketika kita mengklik salah satu Tautan tertentu itu, itu harus memuat halaman yang terkait dengan jalur itu tanpa memuat ulang halaman. Contoh:

masukkan deskripsi gambar di sini

Komponen NavLink:

Jika, kami ingin menambahkan beberapa gaya ke Tautan. Sehingga ketika kita mengklik link tertentu, maka dengan mudah dapat diketahui Link mana yang aktif. Untuk react router ini menyediakan NavLink, bukan Link . Sekarang ganti Tautan dari Navlink dan tambahkan properti activeStyle . Properti activeStyle berarti ketika kita mengklik Tautan, itu harus disorot dengan gaya berbeda sehingga kita dapat membedakan tautan mana yang sedang aktif. Contoh:

masukkan deskripsi gambar di sini

Ref: https://www.javatpoint.com/react-router

Santosh Singh
sumber
5

Sederhananya, Ketika Anda menggunakan <Link>tidak ada kelas aktif pada elemen yang dipilih.
Sebaliknya, dengan <NavLink>elemen yang dipilih disorot karena elemen ini ditambahkan ke kelas yang aktif.
Semoga bermanfaat untuk anda.

Neo_
sumber
Beberapa contoh kode akan membantu pengguna. Dari ulasan
Vaibhav Vishal