Navigoinnin tila React Routerissa

Jos klikkaamme tuotteita listassa, huomaamme, että tuotesivu latautuu ensimmäisellä kerralla viiveellä, mutta muilla kerroilla jo nopeasti, sama asia tuotetta lisättäessä ja päivitettäessä, koska meillä on välimuisti asiakaspuolella.

Tässä oppitunnissa näytämme käyttäjälle minkä tilassa sivu on. Tässä voi auttaa hookki useNavigation. Tämä hookki palauttaa objektin, jossa on useita ominaisuuksia. Meitä kiinnostaa yksi niistä - ominaisuus state.

Ominaisuudella state voi olla 3 arvoa: 'idle' (ei tapahdu mitään), 'submitting' (kun lomake lähetetään POST-, PUT-, PATCH- tai DELETE-metodilla ja reitin action on kutsuttu), 'loading' (kun seuraavan reitin lataajaa on kutsuttu seuraavan sivun renderöimiseksi). Meitä kiinnostaa viimeinen arvo.

Käydään tiedostossa root.jsx ja tuodaan tämä hookki:

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

Sen jälkeen, hookin palauttamalle tulokselle, luomme muuttujan navigation funktiossa Root - ennen return:ä:

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

Ja nyt hyödynnämme sen ominaisuutta state, jos se on arvo 'loading', asetamme luokan loading sille diville, jossa tuotetiedot renderöidään:

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

Meidän on vielä lisättävä tyylejä luokalle loading tiedostoon index.css. Lataustilan sattuessa lisätään vain opacity:ia:

div.loading {
	opacity: 0.3;
}

Nyt, jos sivusto ladataan uudelleen ja klikkailemme tuotteita listassa tai esimerkiksi lisäämme uuden tuotteen, huomaamme, että nykyinen sivu hetkellisesti haalenee, ennen kuin seuraava ilmestyy.

Ota sovellus, jonka loit aiempien oppituntien tehtäviin. Hyödyntäen oppitunnin materiaalia, hookin useNavigation avulla tee niin, että käyttäjä pystyy näkemään, että seuraava sivu opiskelijatiedoilla ladataan.