Menyorot Pautan Aktif dalam React Router

Katakanlah kita telah menambah beberapa produk dalam aplikasi kita dan melihat setiap satu produk. Bagaimana kita boleh tahu halaman produk mana yang sedang kita layari sekarang? Mari kita sorot produk tersebut dalam senarai, contohnya dengan fon tebal dan warna perang, dan jika pautan masih dalam proses memuat, kelabu.

Sebagai permulaan, pergi ke halaman utama, tambah 4 produk ke dalam senarai dan untuk setiap satu daripadanya, masukkan data. Berikan mereka sebarang nama.

Dalam menyorot pautan aktif, komponen NavLink akan membantu kita, ini ialah sejenis komponen Link yang mengetahui tentang keadaan data. Biasanya ia digunakan apabila mencipta menu navigasi.

Mari buka root.jsx dan import NavLink (jangan lupa buang import Link, jika tidak React mungkin mengeluarkan ralat, kerana kita tidak menggunakannya lagi):

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

Kemudian dalam susun atur, gantikan komponen Link dengan NavLink:

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

Dan tambahkan prop className kepadanya, serta gunakan logik bersyarat. Jika halaman telah dimuat, pautan akan bertukar kepada keadaan aktif, jika sedang dimuat, kepada keadaan memuat, jika tiada apa-apa sedang berlaku, ia akan kekal seperti sedia kala. Bergantung pada ini, kelas pautan 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>

Kita hanya perlu menambah gaya untuk kelas active dan loading ke dalam fail css kita:

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

a.loading {
	color: gray;
}

Selesai! Sekarang klik pada produk dalam senarai.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, laksanakan penyorotan pautan aktif untuk senarai pelajar di dalamnya, supaya jelas data pelajar mana yang pengguna sedang lihat sekarang.