React Routerда фаол ҳаволани ажратиш

Фарз қилайлик, биз иловамизга бир нечта маҳсулот қўшдик ва ҳар бир маҳсулотни кўриб чиқамокдамиз. Қандай қилиб биз қайси маҳсулот саҳифасида Turganimizни биламиз? Келгила, ушбу маҳсулотни рўйхатда, масалан, қалин шрифт ва қўнггир ранг билан ажратамиз, агар ҳавола ҳали юкланмоқда бўлса, кулранг қиламиз.

Бошлаш учун бош саҳифага киринг, рўйхатга 4 маҳсулот қўшинг ва уларнинг ҳар бири учун маълумотларни киритинг. Уларга истаган номларингизни беринг.

Фаол ҳаволани ажратишда бизга NavLink компоненти ёрдам беради, бу Link компонентининг бир тури булиб, маълумотларнинг ҳолати ҳақида билади. Одатда у навигация менюсини яратишда қўлланилади.

Келгила, root.jsx ochaylik va NavLink ни импорт қилайлик (Link ни импорт қилишни унутманг, акс ҳолда React шикоят қилиши мумкин, чунки биз уни бошқа ишлатмаймиз):

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

Сўнгра макетда Link компонентини NavLink га алмаштирамиз:

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

Ва унга className пропсини қўшамиз, шунингдек шартли мантиқни ишлатамиз. Агар саҳифа юкланган бўлса, ҳавола фаол ҳолатга ўтади, агар юкланмоқда бўлса, юклов ҳолатига, агар ҳеч нарса бўлмаса, аввалгидек қолади. Буга қараб ҳаволанинг синфи ўзгаради:

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

Бизга active ва loading синфлари учун услубларни қўшиш қолди:

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

a.loading {
	color: gray;
}

Тайёр! Энди рўйхатдаги маҳсулотларни босиб кўринг.

Олдинги дарслар учун topshiriklarda яратган иловангизни олинг. Дарс materiallaridan фойдаланиб, унда студентлар рўйхати учун фаол ҳаволани ажратишни амалга оширинг, шундай килиб, қайси студентнинг маълумотларини фойдаланувчи ҳозир кўриб turgani аник бўлсин.