React Router'da faol havolani ajratish

Faraz qilaylik, biz bir nechta mahsulotlarni ilovamizga qo'shdik va har birini ko'rib chiqayapmiz. Hozir qaysi mahsulot sahifasida turganimizni qanday bilamiz? Keling, ushbu mahsulotni ro'yxatda ajratib ko'rsataylik, masalan qalin shrift va jigarrang rangda, agar havola hali yuklanayotgan bo'lsa, kulrang.

Boshlash uchun asosiy sahifaga kiring, ro'yxatga 4 ta mahsulot qo'shing va ularning har biri uchun ma'lumotlarni kiriting. Ularga istalgan nomlarni bering.

Faol havolani ajratishda bizga NavLink komponenti yordam beradi, bu Link komponentining bir turi bo'lib, ma'lumotlarning holati haqida ma'lumotga ega. Odatda u navigatsiya menyusini yaratishda qo'llaniladi.

Keling, root.jsx faylini ochamiz va NavLink ni import qilamiz (Link importini olib tashlashni unutmang, aks holda React xafa bo'lishi mumkin, chunki biz uni endi ishlatmaymiz):

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

Keyin maketda Link komponentini NavLink bilan almashtiramiz:

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

Va unga className propini qo'shamiz, a shuningdek shartli mantiqdan foydalanamiz. Agar sahifa yuklangan bo'lsa, havola faol holatga o'tadi, agar yuklanayotgan bo'lsa, yuklash holatiga, agar hech narsa bo'lmasa, avvalgidek qoladi. Bunga bog'liq holda havolaning sinfi o'zgaradi:

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

Bizga faqat css faylimizda active va loading sinflari uchun uslublar qo'shish qoldi:

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

a.loading {
	color: gray;
}

Tayyor! Endi ro'yxatdagi mahsulotlarni bosib ko'ring.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, unda talabalar ro'yxati uchun faol havolani ajratib ko'rsatishni amalga oshiring, shunda foydalanuvchi hozir qaysi talabaning ma'lumotlarini ko'rib chiqayotgani aniq bo'lsin.