Navigasiestatus in React Router

As ons op produkte in die lys klik, sien ons dat die produkbladsy die eerste keer met 'n vertraging gelaai word, en daarna vinnig, dieselfde gebeur by die byvoeging en opdatering van 'n produk, aangesien ons 'n kas aan die kant van die kliënt het.

In hierdie les sal ons die gebruiker wys in watter toestand ons bladsy verkeer. Die useNavigation-hook kan ons hierby help. Hierdie hook gee 'n objek met 'n reeks eienskappe as resultaat terug. Een daarvan sal ons interesseer - die state eienskap.

Die state eienskap kan 3 waardes hê: 'idle' (niks gebeur nie), 'submitting' (wanneer 'n vorm via POST, PUT, PATCH of DELETE gestuur word en 'n roete se action opgeroep word), 'loading' (wanneer die laaier vir die volgende roete opgeroep word om die volgende bladsy te teken). Die laaste waarde sal ons interesseer.

Kom ons gaan na die lêer root.jsx en voer hierdie hook in:

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

Dan, vir die resultaat wat die hook teruggee, skep ons 'n veranderlike navigation in die funksie Root - voor return:

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

En nou maak ons gebruik van sy eienskap state, as die waarde 'loading' is, sal ons die klas loading stel vir die div waarin ons die produkdata teken:

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

Ons moet net nog style byvoeg vir die klas loading in index.css. Kom ons verhoog eenvoudig die opacity in die geval van 'n laaitoestand:

div.loading {
	opacity: 0.3;
}

Nou, as ons die webwerf herlaai en op produkte in die lys klik of, byvoorbeeld, 'n nuwe produk byvoeg, sal ons sien dat die huidige bladsy vir 'n oomblik vervaag voordat die volgende een verskyn.

Neem die aansoek wat jy in die take vir vorige lesse geskep het. Deur die lesmateriaal te gebruik en die useNavigation-hook, maak dit so dat die gebruiker kan sien dat die volgende bladsy met studentedata gelaai word.