Navigatiestatus in React Router

Als we op producten in de lijst klikken, zien we dat de pagina met het product de eerste keer met vertraging wordt geladen, en de andere keren al snel, hetzelfde bij het toevoegen en bijwerken van een product, omdat we een cache aan de clientzijde hebben.

In deze les laten we de gebruiker zien in welke staat onze pagina verkeert. Hierbij kan de hook useNavigation ons helpen. Als resultaat van zijn werk geeft deze hook een object met een aantal eigenschappen terug. We zijn geïnteresseerd in één ervan - de eigenschap state.

De eigenschap state kan 3 waarden hebben: 'idle' (er gebeurt niets), 'submitting' (bij het verzenden van een formulier via POST, PUT, PATCH of DELETE werd de action van de route aangeroepen), 'loading' (wanneer de loader voor de volgende route is aangeroepen om de volgende pagina te renderen). We zijn geïnteresseerd in de laatste waarde.

Laten we naar het bestand root.jsx gaan en deze hook importeren:

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

Vervolgens maken we voor het door de hook teruggegeven resultaat een variabele navigation aan in de functie Root - vóór return:

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

En laten we nu gebruikmaken van de eigenschap state, als dit de waarde 'loading' is, dan stellen we de klasse loading in voor de div waarin onze productgegevens worden gerenderd:

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

We hoeven alleen nog stijlen toe te voegen voor de klasse loading in index.css. Laten we in geval van een laadstatus gewoon de opacity verhogen:

div.loading {
	opacity: 0.3;
}

Nu, als we de site herladen en op producten in de lijst klikken of, bijvoorbeeld, een nieuw product toevoegen, zien we dat de huidige pagina even vervaagt voordat de volgende verschijnt.

Neem de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, zorg met behulp van de hook useNavigation dat de gebruiker kan zien dat de volgende pagina met studentgegevens wordt geladen.