React Router'де активилүү шилтемени бөлүп көрсөтүү

Айталы, биз тиркемебизге бир нече продукт коштук жана ар бир продуктту көрүп жатабыз. Биз кайсы продукттун баракчасында экенибизди кантип биле алабыз? Келгиле, ошол продуктту тизмеде бөлүп көрсөтөлү, мисалы, коюу карип жана күрөң түс менен, ал эми шилтеме жүктөлүп жатса, боз түс менен.

Баштоо үчүн башкы баракчага кириңиз, тизмеге 4 продукт кошуңуз жана ар бири үчүн маалымат киргизиңиз. Аларга каалаган аттарды бериңиз.

Активдүү шилтемени бөлүп көрсөтүүдө бизге NavLink компоненти жардам берет, бул Link компонентинин бир түрү, ал маалыматтардын абалы жөнүндө билет. Адатта ал навигациялык меню түзүлгөндө колдонулат.

Келгиле, root.jsx файлын ачып, 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 класстары үчүн стилдерди css-файлыбызга кошуу гана калды:

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

a.loading {
	color: gray;
}

Даяр! Эми тизмедеги продукттарды басып көрүңүз.

Өзүңүз мурунку сабактардын тапшырмаларында түзгөн тиркемеңизди алыңыз. Сабактын материалдарын пайдаланып, анда студенттер тизмеси үчүн активдүү шилтемени бөлүп көрсөтүүнү ишке ашырыңыз, колдонуучу азыр кайсы студенттин маалыматтарын көрүп жатканы түшүнүктүү болсун.