React Router-ում ակտիվ հղումի ընդգծում

Ենթադրենք, մենք ավելացրել ենք մի քանի ապրանք մեր հավելվածում և դիտում ենք դրանցից յուրաքանչյուրը: Ինչպե՞ս հասկանանք, թե որ ապրանքի էջում ենք ներկայումս գտնվում: Եկեք ընդգծենք այս ապրանքը ցուցակում, օրինակ՝ թավ տառատեսակով և դարչնագույն գույնով, իսկ եթե հղումը դեռ բեռնվում է, ապա մոխրագույն:

Սկսելու համար մուտք գործեք գլխավոր էջ, ավելացրեք ցուցակում 4 ապրանք և դրանցից յուրաքանչյուրի համար մուտքագրեք տվյալներ: Տվեք նրանց ցանկացած անվանում:

Ակտիվ հղումը ընդգծելու հարցում մեզ կօգնի NavLink բաղադրիչը, սա Link բաղադրիչի տեսակ է, որն իմանում է տվյալների վիճակի մասին: Սովորաբար այն օգտագործվում է navigation menu-ի ստեղծման ժամանակ:

Եկեք բացենք root.jsx և իմպորտ անենք NavLink (մի մոռացեք հեռացնել Link-ի իմպորտը, հակառակ դեպքում React-ը կարող է բողոքել, քանի որ մենք այն այլևս չենք օգտագործում):

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

Այնուհետև layout-ում Link բաղադրիչը փոխարինենք NavLink-ով:

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

Եվ ավելացնենք դրան className prop, ինչպես նաև օգտագործենք պայմանական լոգիկա: Եթե էջը բեռնվել է, ապա հղումը կանցնի ակտիվ վիճակի, եթե բեռնվում է, ապա՝ բեռնման վիճակի, եթե ոչինչ չի տեղի ունենում, ապա կմնա նախկինում եղածի պես: Կախված դրանից՝ կփոխվի հղման դասը (class):

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

Պատրաստ է: Հիմա սեղմեք ապրանքների վրա ցուցակում:

Վերցրեք ձեր կողմից նախորդ դասերի առաջադրանքներում ստեղծված հավելվածը: Օգտագործելով դասի նյութերը, իրականացրեք դրանում ակտիվ հղման ընդգծում ուսանողների ցուցակի համար այնպես, որ հասկանալի լինի, թե որ ուսանողի տվյալներն է user-ը ներկայումս դիտում: