Նավիգացիայի վիճակը React Router-ում

Եթե մենք կտտացնում ենք ապրանքների ցանկում, տեսնում ենք, որ առաջին անգամ ապրանքի էջը բեռնվում է ուշացումով, իսկ մնացած դեպքերում արդեն արագ, նույնը տեղի է ունենում ապրանքը ավելացնելիս և թարմացնելիս, քանի որ մենք ունենք քեշ կլիենտի կողմից:

Այս դասում մենք օգտատիրոջը ցույց կտանք, թե ինչ վիճակում է գտնվում մեր էջը: Դրանում մեզ կարող է օգնել useNavigation հուքը: Այս հուքն իր աշխատանքի արդյունքում տալիս է օբյեկտ մի շարք հատկություններով: Մեզ կհետաքրքրի դրանցից մեկը՝ state հատկությունը:

state հատկությունը կարող է ունենալ 3 արժեք՝ 'idle' (ոչինչ չի կատարվում), 'submitting' (երբ POST, PUT, PATCH կամ DELETE մեթոդով ձևը ուղարկելիս կանչվում է երթուղու action-ը), 'loading' (երբ կանչվում է հաջորդ երթուղու լoader-ը՝ հաջորդ էջը նկարելու համար): Մեզ կհետաքրքրի վերջին արժեքը:

Եկեք մտնենք root.jsx ֆայլը և իմպորտենք այս հուքը:

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

Այնուհետև, հուքով վերադարձված արդյունքի համար, սահմանենք navigation փոփոխականը Root ֆունկցիայում - return-ից առաջ:

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

Եվ հիմա օգտագործենք դրա state հատկությունը, եթե դա 'loading' արժեքն է, ապա մենք կսահմանենք loading դասը այն div-ի համար, որի ներսում տեղի է ունենում ապրանքի տվյալների նկարումը:

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

Մեզ մնում է ավելացնել loading դասի համար ստիլեր index.css ֆայլում: Եկեք բեռնման վիճակի դեպքում պարզապես մեծացնենք opacity-ը:

div.loading {
	opacity: 0.3;
}

Այժմ, եթե կայքը վերաբեռնելուց հետո, կտտացնենք ապրանքների ցանկում կամ, օրինակ, ավելացնենք նոր ապրանք, մենք կտեսնենք, որ ընթացիկ էջը որոշակի պահի կխամրի, նախքան հաջորդ էջի հայտնվելը:

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներում: Օգտագործելով դասի նյութերը, useNavigation հուքի միջոցով ապահովեք, որ օգտատերը կարողանա տեսնել, որ ուսանողի տվյալներով հաջորդ էջը բեռնվում է: