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;
}

Дайын! Енді тізімдегі өнімдерді басып көріңіз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, онда студенттер тізімі үшін белсенді сілтемені бөлектеуді жүзеге асырыңыз, сонда қай студенттің деректерін қолданушы қазір қарап жатқаны түсінікті болуы керек.