Stanje navigacije u React Router-u

Ako kliknemo na proizvode u listi, vidimo da se stranica sa proizvodom prvi put učitava sa zakašnjenjem, a ostale već brzo, isto važi i za dodavanje i ažuriranje proizvoda, pošto imamo keš na strani klijenta.

U ovoj lekciji ćemo pokazati korisniku u kakvom stanju se nalazi naša stranica. U tome nam može pomoći huk useNavigation. Kao rezultat svog rada ovaj huk daje objekat sa nizom svojstava. Zanimaće nas jedno od njih - svojstvo state.

Svojstvo state može imati 3 vrednosti: 'idle' (ništa se ne dešava), 'submitting' (kada se pri slanju forme preko POST, PUT, PATCH ili DELETE pozove action rute), 'loading' (kada se pozove loader za sledeću rutu, da bi iscrtala sledeću stranicu). Zanimaće nas poslednja vrednost.

Hajdemo da odemo u fajl root.jsx i uvezemo ovaj huk:

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

Zatim, za rezultat koji huk vraća, napravićemo promenljivu navigation u funkciji Root - ispred return:

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

A sada ćemo iskoristiti njeno svojstvo state, ako je to vrednost 'loading', onda ćemo postaviti klasu loading za div, u kom se kod nas dešava iscrtavanje podataka o proizvodu:

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

Ostaje nam da dodamo stilove za klasu loading u index.css. Hajdemo u slučaju stanja učitavanja jednostavno povećati opacity:

div.loading {
	opacity: 0.3;
}

Sada, ako, ponovo učitavajući sajt, kliknemo na proizvode u listi ili, na primer, dodamo nov proizvod, videćemo da će trenutna stranica na neki moment potamniti, pre nego što se pojavi sledeća.

Uzmite aplikaciju, koju ste kreirali u zadacima za prethodne lekcije. Koristeći se materijalom iz lekcije, uz pomoć huka useNavigation uradite tako da korisnik može da vidi da se sledeća stranica sa podacima o studentu učitava.