Navigācijas stāvoklis React Router

Ja mēs noklikšķinām uz produktiem sarakstā, mēs redzam, ka pirmo reizi produkta lappuse ielādējas ar aizkavi, bet pārējās reizes jau ātri, tas pats notiek pievienojot un atjauninot produktu, jo mums ir klienta pusē kešatmiņa.

Šajā nodarbībā mēs parādīsim lietotājam kādā stāvoklī atrodas mūsu lappuse. Tas mums var palīdzēt āķis useNavigation. Šis āķis savā darba rezultātā izdod objektu ar vairākām īpašībām. Mūs interesēs viena no tām - īpašība state.

Īpašībai state var būt 3 vērtības: 'idle' (nekas nenotiek), 'submitting' (kad, iesniedzot formu izmantojot POST, PUT, PATCH vai DELETE, tiek izsaukta action marsruta), 'loading' (kad tiek izsaukts iekrāšanas mehānisms nākamajam marsrutam, lai attēlotu nākamo lapu). Mūs interesēs pēdējā vērtība.

Ieejam failā root.jsx un importējam šo āķi:

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

Pēc tam, lai saglabātu āķa atgriezto rezultātu, izveidosim mainīgo navigation funkcijā Root - pirms return:

const { products } = useLoaderData();
const navigation = useNavigation();

Un tagad izmantosim tā īpašību state, ja tā būs vērtība 'loading', tad mēs uzstādīsim klasi loading div elementam, kurā notiek produkta datu attēlošana:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

Mums atliek pievienot stilus klasei loading failā index.css. Iekrāšanas stāvokļa gadījumā vienkārši palielināsim opacity:

div.loading {
	opacity: 0.3;
}

Tagad, ja, pārlādējot vietni, noklikšķinām uz produktiem sarakstā vai, piemēram, pievienojam jaunu produktu, mēs redzēsim, ka pašreizējā lappuse uz kādu mirkli kļūs gaišāka, pirms parādīsies nākamā.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, ar āķa useNavigation palīdzību panāciet, lai lietotājs varētu redzēt, ka nākamā lappuse ar studenta datiem ielādējas.