Gjendja e Navigimit në React Router

Nëse klikojmë në produktet në listë, shohim që herën e parë faqja e produktit ngarkohet me vonesë, ndërsa në të tjerat tashmë shpejt, e njëjta gjë gjatë shtimit dhe përditësimit të produktit, pasi kemi cache në anën e klientit.

Në këtë mësim do t'i tregojmë përdoruesit në çfarë gjendje është faqja jonë. Në këtë na mund të ndihmojë huku useNavigation. Si rezultat të punës së tij, ky huk kthen një objekt me një sërë karakteristikash. Ne do të jemi të interesuar për njërën prej tyre - vetinë state.

Vetia state mund të ketë 3 vlera: 'idle' (asgjë nuk po ndodh), 'submitting' (kur dërgohet një formular përmes POST, PUT, PATCH ose DELETE dhe është thirrur action i rrugës), 'loading' (kur është thirrur loader-i për rrugën tjetër, për të vizatuar faqen e ardhshme). Ne do të jemi të interesuar për vlerën e fundit.

Le të shkojmë në skedarin root.jsx dhe të importojmë këtë huk:

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

Pastaj, për rezultatin që kthen huku, le të krijojmë një ndryshore navigation në funksionin Root - para return:

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

Dhe tani le të përdorim vetinë e saj state, nëse kjo do të jetë vlera 'loading', atëherë do të vendosim klasën loading për div-in, ku ndodh vizatimi i të dhënave të produktit:

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

Na mbetet të shtojmë stile për klasën loading në index.css. Le të rrisim opacity në rast të gjendjes së ngarkimit:

div.loading {
	opacity: 0.3;
}

Tani, nëse, pas ringarkimit të sajtit, klikojmë në produktet në listë ose, për shembull, shtojmë një produkt të ri, ne do të shohim që faqja aktuale për një moment do të zbehet, para se të shfaqet e ardhmja.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, me ndihmën e hukut useNavigation bëni në mënyrë që përdoruesi të mund të shohë se faqja e ardhshme me të dhënat e studentit po ngarkohet.