Navigatsiooni olek React Routeris

Kui me klõpsame toodete nimekirjas, näeme, et esimest korda laadib toote lehekülg end alla viivitusega, aga teistel kordadel juba kiiresti, sama ka toote lisamisel ja uuendamisel, kuna meil on kliendi pooles vahemälu.

Selles õppetükis näitame kasutajale mis olekus on meie lehekülg. Selles saab meile abiks olla hook useNavigation. Töö tulemusena annab see hook välja objekti mitme omadusega. Meid huvitab üks neist - omadus state.

Omadus state võib omada 3 väärtust: 'idle' (midagi ei toimu), 'submitting' (kui vormi saatmisel läbi POST, PUT, PATCH või DELETE kutsutakse välja action marsruudist), 'loading' (kui kutsutakse välja laadija järgmise marsruudi jaoks, et jägmine lehekülg välja joonistada). Meid huvitab viimane väärtus.

Läheme faili root.jsx ja impordime selle hooki:

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

Seejärel, tagastatava hooki tulemuse jaoks, loome muutuja navigation funktsioonis Root - enne return:

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

Ja nüüd kasutame selle omadust state, kui see on väärtus 'loading', siis määrame klassi loading div'ile, kus meil toimub toote andmete väljajoonistamine:

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

Meil jääb lisada stiile klassile loading faili index.css. Olgu laadimise oleku korral lihtsalt suurendatud opacity:

div.loading {
	opacity: 0.3;
}

Nüüd, kui saidi uuesti laadides, klõpsata nimekirjas toodetel või näiteks lisada uus toode, näeme, et praegune lehekülg hetkeks hägustub, enne kui järgmine ilmub.

Võtke rakendus, mille te lõite ülesannetes eelmistele õppetundidele. Kasutades õppetunni materjale, tege hooki useNavigation abil nii, et kasutaja saaks näha, et järgmine lehekülg õpilase andmetega laaditakse.