Naršymo būsena React Router

Jei mes spustelėjame produktus sąraše, matome, kad pirmą kartą produktų puslapis įkeliamas su delsimo, o kitus jau greitai, tas pats pridedant ir atnaujinant produktą, kadangi mes turime podėlį vartotojo pusėje.

Šioje pamokoje mes parodysime vartotojui kokia būsena yra mūsų pushlapis. Tai mums gali padėti kabliukas useNavigation. Savo darbo rezultatą šis kabliukas grąžina objektą su keletu savybių. Mus domins viena iš jų - savybė state.

Savybė state gali turėti 3 reikšmes: 'idle' (nieko nevyksta), 'submitting' (kai siunčiant formą per POST, PUT, PATCH ar DELETE iškviečiamas action maršruto), 'loading' (kai iškviečiamas įkėliklis kitam maršrutui, kad atvaizduotų kitą puslapį). Mus bus dominti paskutinė reikšmė.

Ženkime į failą root.jsx ir importuokime šį kabliuką:

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

Tada, grąžinamam kabliuko rezultatui, sukursime kintamąjį navigation funkcijoje Root - prieš return:

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

O dabar panaudokime jos savybę state, jei tai bus reikšmė 'loading', tai nustatysime klasę loading div'ui, kuriame mums vyksta produkto duomenų atvaizdavimas:

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

Mums liko pridėti stilių klasei loading index.css. Tegul įkėlimo būsenos atveju tiesiog padidiname opacity:

div.loading {
	opacity: 0.3;
}

Dabar, jei, perkrovę svetainę, spustelėsime produktus sąraše ar, pavyzdžiui, pridėsime naują produktą, mes pamatysime, kad esamas puslapis kažkuriuo momentu nublankš, prieš pasirodant kitas.

Paimkite programėlę, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, naudodami kabliuką useNavigation padarykite taip, kad vartotojas galėtų matyti, kad kitas pushlapis su studento duomenimis įkeliamas.