Manfaat React Router v4 <NavLink> vs <Link>

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?

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.

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>

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:

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:

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

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.