Navigationsstatus i React Router

Hvis vi klikker på produkterne i listen, ser vi, at siden med produktet første gang indlæses med forsinkelse, og de andre gange hurtigt, det samme ved tilføjelse og opdatering af produktet, da vi har cache på klientsiden.

I denne lektion vil vi vise brugeren i hvilken tilstand vores side befinder sig. Her kan hook'en useNavigation hjælpe os. Resultatet af sit arbejde giver denne hook et objekt med en række egenskaber. Vi vil være interesseret i en af dem - egenskaben state.

Egenskaben state kan have 3 værdier: 'idle' (intet sker), 'submitting' (når der ved afsendelse af formular via POST, PUT, PATCH eller DELETE kaldes en action for ruten), 'loading' (når der kaldes en loader for den næste rute for at gengive den næste side). Vi vil være interesseret i den sidste værdi.

Lad os gå ind i filen root.jsx og importere denne hook:

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

Derefter, for resultatet returneret af hook'en, opretter vi variablen navigation i funktionen Root - før return:

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

Og lad os nu bruge dens egenskab state, hvis det er værdien 'loading', så sætter vi klassen loading for div'en, hvor vores produktdata gengives:

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

Tilbage står det at tilføje styles for klassen loading i index.css. Lad os i tilfælde af indlæsningstilstand bare øge opacity:

div.loading {
	opacity: 0.3;
}

Nu, hvis vi genindlæser siden og klikker på produkterne i listen eller for eksempel tilføjer et nyt produkt, vil vi se, at den aktuelle side i et øjeblik bliver gennemsigtig, før den næste side vises.

Tag applikationen, som du oprettede i opgaverne til tidligere lektioner. Brug materialet fra lektionen, og ved hjælp af hook'en useNavigation, sørg for at brugeren kan se, at den næste side med studerendedata indlæses.