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>

Бізге loading класына index.css-та стильдерді қосу ғана қалды. Жүктеу күйінде opacity-ті ұлғайтайық:

div.loading {
	opacity: 0.3;
}

Енді, сайтты қайта жүктеп, тізімдегі өнімдерді бассаңыз немесе, мысалы, жаңа өнім қоссаңыз, біз келесі бет пайда болмас бұрын ағымдағы беттің соладығын көреміз.

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