Starea de navigare în React Router

Dacă facem clic pe produse din listă, vedem că prima dată pagina cu produsul se încarcă cu o întârziere, iar în celelalte cazuri deja rapid, la fel la adăugarea și actualizarea produsului, deorece avem cache pe partea clientului.

În această lecție vom afișa utilizatorului în ce stare se află pagina noastră. În aceasta ne poate ajuta hook-ul useNavigation. Rezultatul muncii sale acest hook returnează un obiect cu o serie de proprietăți. Ne va interesa una dintre ele - proprietatea state.

Proprietatea state poate avea 3 valori: 'idle' (nimic nu se întâmplă), 'submitting' (când la trimiterea formularului prin POST, PUT, PATCH sau DELETE este apelată action rutei), 'loading' (când este apelat încărcătorul pentru următoarea rută, pentru a randa pagina următoare). Ne va interesa ultima valoare.

Să intrăm în fișierul root.jsx și să importăm acest hook:

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

Apoi, pentru rezultatul returnat de hook, să declarăm variabila navigation în funcția Root - înainte de return:

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

Și acum să folosim proprietatea sa state, dacă aceasta va fi valoarea 'loading', atunci vom seta clasa loading pentru div-ul în care se află randarea datelor produsului:

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

Ne rămâne să adăugăm stiluri pentru clasa loading în index.css. Să în cazul stării de încărcare pur și simplu mărim opacity:

div.loading {
	opacity: 0.3;
}

Acum, dacă, reîncărcând site-ul, facem clic pe produse în listă sau, de exemplu, adăugăm un produs nou, vom vedea că pagina curentă pentru un moment se va estompa, înainte de a apărea următoarea.

Luați aplicația creată de dvs. în sarcinile din lecțiile trecute. Folosind materialele lecției, cu ajutorul hook-ului useNavigation faceți astfel încât utilizatorul să poată vedea că următoarea pagină cu datele studentului se încarcă.