Menyorot Tautan Aktif di React Router

Anggaplah kita telah menambahkan beberapa produk ke aplikasi kita dan sedang melihat setiap produk tersebut. Bagaimana kita bisa tahu di halaman produk mana kita sedang berada? Mari sorot produk tersebut dalam daftar, misalnya dengan huruf tebal dan warna coklat, dan jika tautannya masih dalam proses memuat, maka beri warna abu-abu.

Pertama-tama, buka halaman utama, tambahkan 4 produk ke dalam daftar dan untuk masing-masing produk, isi datanya. Beri mereka nama apa saja.

Untuk menyorot tautan aktif, komponen NavLink akan membantu kita, ini adalah varian dari komponen Link, yang mengetahui tentang status data. Biasanya komponen ini digunakan saat membuat menu navigasi.

Mari buka root.jsx dan impor NavLink (jangan lupa untuk menghapus impor Link, karena React mungkin akan mengeluh, soalnya kita tidak menggunakannya lagi):

import { NavLink } from 'react-router-dom';

Kemudian di dalam layout, ganti komponen Link dengan NavLink:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

Dan tambahkan prop className, serta gunakan logika bersyarat. Jika halaman telah selesai dimuat, maka tautan akan berubah menjadi status aktif, jika sedang dalam proses memuat, maka menjadi status memuat, jika tidak terjadi apa-apa, maka akan tetap seperti sebelumnya. Tergantung pada kondisi ini, kelas pada tautan akan berubah:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

Tinggal menambahkan gaya untuk kelas active dan loading ke file css kita:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

Selesai! Sekarang coba klik pada produk di dalam daftar.

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran ini, terapkan di dalamnya penyorotan tautan aktif untuk daftar mahasiswa sehingga jelas data mahasiswa mana yang sedang dilihat pengguna saat ini.