Hali ya Urambazaji katika React Router

Ikiwa tunabonyeza bidhaa kwenye orodha, tunaona kwamba mara ya kwanza ukurasa wa bidhaa hupakia kwa kucheleweshwa, na kwa mara nyingine haraka, vile vile wakati wa kuongeza na kusasisha bidhaa, kwa sababu tuna kache upande wa mteja.

Katika somo hili tutamwonyesha mtumiaji katika hali gani ukurasa wetu uko. Hii inatuwezesha kutumia kona useNavigation. Matokeo ya kazi yake kona hii inatoa kitu na mfululizo wa sifa. Tutavutiwa na moja wapo - sifa state.

Sifa state inaweza kuwa na 3 maadili: 'idle' (hakuna kinachotokea), 'submitting' (wakati wa kutuma fomu kupitia POST, PUT, PATCH au DELETE imeitwa action ya njia), 'loading' (wakati wa kuitwa kipakiaji kwa njia inayofuata, ili kuonyesha ukurasa unaofuata). Tutavutiwa na thamani ya mwisho.

Wacha tuingie kwenye faili root.jsx na tuagize kona hii:

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

Kisha, kwa matokeo yanayorudishwa na kona, tutaweza kutofautisha navigation katika kitendo Root - kabla ya return:

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

Na sasa tutatumia sifa yake state, ikiwa itakuwa thamani 'loading', basi tutaweka darasa loading kwa divi, ambapo kuna utengenezaji wa data ya bidhaa:

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

Imetubakia kuongeza mitindo kwa darasa loading katika index.css. Wacha tuongeze opacity tu kwa hali ya upakiaji:

div.loading {
	opacity: 0.3;
}

Sasa, ikiwa, ukipakia upya tovuti, ubonyeze bidhaa kwenye orodha au, kwa mfano, ongeza bidhaa mpya, sisi tutaona kwamba ukurasa wa sasa kwa muda utapungua, kabla ya kuonekana unaofuata.

Chukua programu, iliyoundwa na wewe kwa kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, kwa msaada wa kona useNavigation fanya ili mtumiaji aweze kuona, kwamba ukurasa unaofuata na data ya mwanafunzi unapakizwa.