Stav navigácie v React Router

Ak klikneme na produkty v zozname, vidíme, že prvý krát sa stránka s produktom načítava s oneskorením, a ostatné už rýchlo, to isté pri pridávaní a aktualizácii produktu, pretože máme vyrovnávaciu pamäť na strane klienta.

V tejto lekcii zobrazíme používateľovi v akom stave sa nachádza naša stránka. V tom nám môže pomôcť hook useNavigation. Výsledkom svojej práce tento hook vydáva objekt s radom vlastností. Nás bude zaujímať jedna z nich - vlastnosť state.

Vlastnosť state môže mať 3 hodnoty: 'idle' (nič sa nedeje), 'submitting' (keď pri odosielaní formulára cez POST, PUT, PATCH alebo DELETE je volaný action trasy), 'loading' (keď je volaný načítavač pre ďalšiu trasu, aby vykreslil ďalšiu stránku). Nás bude zaujímať posledná hodnota.

Poďme do súboru root.jsx a importujme tento hook:

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

Potom, pre vrátený výsledok hooku, vytvoríme premennú navigation vo funkcii Root - pred return:

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

A teraz využijeme jej vlastnosť state, ak to bude hodnota 'loading', tak nastavíme triedu loading pre div, v ktorom sa nám vykresľujú údaje produktu:

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

Zostáva nám pridať štýly pre triedu loading v index.css. Poďme v prípade stavu načítania jednoducho zvýšiť opacity:

div.loading {
	opacity: 0.3;
}

Teraz, ak po opätovnom načítaní stránky klikáme na produkty v zozname alebo, napríklad, pridáme nový produkt, uvidíme, že aktuálna stránka na nejaký moment stlmie, kým sa nezobrazí ďalšia.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov lekcie, pomocou hooku useNavigation urobte tak, aby používateľ mohol vidieť, že ďalšia stránka s údajmi študenta sa načítava.