React Router'до навигациянын абалы

Эгерде биз тизмеден продукттарды чыкылдасак, биринчи жолу продукттун баракчасы кекчитилген абалда жүктөлөөрүн көрөбүз, калгандары тез эле жүктөлөт, ошол эле нерсе продукт кошкондо жана жаңыртканда да, анткени биздин карта тарабында кэш бар.

Бул сабакта биз колдонуучуга биздин баракчабыздын кандай абалда экенин көрсөтөбүз. Бул жерде бизге useNavigation хуку жардам бере алат. Өз ишинен натыйжа катары бул хук катар касиеттерди камтыган объектти чыгарат. Бизди алардын бири - state касиети кызыктырат.

state касиети 3 мааниге ээ болушу мүмкүн: 'idle' (эч нерсе болбой жатат), 'submitting' (форманы POST, PUT, PATCH же DELETE аркылуу жөнөткөндө, action маршруту чакырылганда), 'loading' (кийинки маршрут үчүн жүктөөчү чакырылып, кийинки баракчаны чыгаруу үчүн). Бизди акыркы маани кызыктырат.

Келгиле, root.jsx файлына кирип, бул хуктү импорттойлу:

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

Андан кийин, хукун кайтарган натыйжасы үчүн, Root функциясында navigation өзгөрмөсүн түзөбүз - return'дон мурун:

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

Эми анын state касиетин колдонобуз, эгерде ал 'loading' мааниси болсо, анда биз продукттун маалыматтарын чыгаруу болгон див үчүн loading классын орнотобуз:

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

Бизге index.css файлында loading классы үчүн стилдерди кошуу калды. Келгиле, жүктөө абалында жөн гана opacity'ти көбөйтөлү:

div.loading {
	opacity: 0.3;
}

Эми, эгерде сайтты кайта жүктөп, тизмеден продукттарды чыкылдатсак же, мисалы, жаңы продукт кошсок, биз кийинки баракча пайда болордон бир аз мурда, учурдагы баракчанын солуп көрүнөөрүн көрөбүз.

Мурунку сабактарга тиешелүү тапшырмаларда түзгөн колдонмонузду алыңыз. Сабактын материалдарын пайдаланып, useNavigation хукунун жардамы менен, колдонуучу кийинки студенттин маалыматы бар баракчанын жүктөлүп жатканын көрө алышын камсыз кылыңыз.