Aktīvās saites izcelšana React Router

Pieņemsim, ka mēs esam pievienojuši vairākus produktus mūsu lietotnā un apskatām katru no produktiem. Kā lai mēs saprotam, uz kura produkta lapu mēs šobrīd atrodamies? Darīsim tā, ka izcelsim šo produktu sarakstā, piemēram, treknrakstā un brūnā krāsā, un, ja saiti vēl ielādē, tad pelēkā.

Sākumā dodieties uz sākumlapu, pievienojiet sarakstam 4 produktus un katram no tiem ievadiet datus. Uzstādiet tiem jebkādus nosaukumus.

Aktīvās saites izcelšanā mums palīdzēs komponents NavLink, tas ir Link komponenta paveids, kas zina par datu stāvokli. Parasti to lieto, veidojot navigācijas izvēlni.

Atvērsim root.jsx un importēsim NavLink (neaizmirstiet noņemt importu Link, pretējā gadījumā React var dusmoties, jo mēs to vairs neizmantojam):

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

Pēc tam maketā aizstāsim komponentu Link ar NavLink:

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

Un pievienosim tam propu className, kā arī izmantosim nosacījuma loģiku. Ja lapa ielādējās, tad saite pāries aktīvā stāvoklī, ja ielādējas, tad ielādes stāvoklī, ja nekas notiek, tad paliks tāda pati. Atkarībā no tā mainīsies saites klase:

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

Mums atliek pievienot stilu active un loading klases mūsu css failā:

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

a.loading {
	color: gray;
}

Gatavs! Un tagad noklikšķiniet uz produktiem sarakstā.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, realizējiet tajā aktīvās saites izcelšanu studentu sarakstam tā, lai būtu saprotams, kura studenta datus lietotājs šobrīd apskata.