Navigasjonsstatus i React Router

Hvis vi klikker på produkter i listen, ser vi at siden med produktet første gang lastes inn med forsinkelse, og deretter raskt de andre gangene, det samme gjelder ved adding og oppdatering av produkt, siden vi har cache på klientsiden.

I denne leksjonen vil vi vise brukeren i hvilken tilstand siden vår befinner seg. Her kan hooken useNavigation hjelpe oss. Resultatet av sitt arbeid gir denne hooken et objekt med en rekke egenskaper. Vi vil være interessert i en av dem - egenskapen state.

Egenskapen state kan ha 3 verdier: 'idle' (ingenting skjer), 'submitting' (når en skjema sendes via POST, PUT, PATCH eller DELETE og action for ruten er kalt), 'loading' (når lasteren for neste rute er kalt for å tegne neste side). Vi vil være interessert i den siste verdien.

La oss gå inn i filen root.jsx og importere denne hooken:

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

Deretter, for resultatet returnert av hooken, oppretter vi en variabel navigation i funksjonen Root - før return:

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

Og la oss nå bruke dens egenskap state, hvis verdien er 'loading', setter vi klassen loading for div-en der våre produktdata tegnes:

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

Gjenstår for oss å legge til stiler for klassen loading i index.css. La oss i tilfelle av lastetilstand bare øke opacity:

div.loading {
	opacity: 0.3;
}

Nå, hvis vi, etter å ha lastet inn nettsiden på nytt, klikker på produkter i listen eller, for eksempel, legger til et nytt produkt, vil vi se at den nåværende siden i et øyeblikk blekner før neste side vises.

Ta applikasjonen du opprettet i oppgavene til tidligere leksjoner. Bruk materialet fra leksjonen, og ved hjelp av hooken useNavigation, gjør slik at brukeren kan se at neste side med studentdata lastes inn.