Стање навигације у React Router

Ако кликнемо на производе у списку, видимо да се страница са производом први пут учитава са одлагањем, а сви остали пут брзо, исто се дешава при додавању и ажурирању производа, пошто имамо кеш на клијентској страни.

У овој лекцији ћемо показати кориснику у ком стању се налази наша страница. У томе нам може помоћи хук useNavigation. Резултат свог рада овај хук даје објекат са низом својстава. Нас ће занимати једно од њих - својство state.

Својство state може имати 3 вредности: 'idle' (ништа се не дешава), 'submitting' (када се приликом слања форме преко POST, PUT, PATCH или DELETE позове action руте), 'loading' (када се позове учитавач (loader) за следећу руту да би се исцртала следећа страница). Нас ће занимати последња вредност.

Хајде да уђемо у фајл 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 направите тако да корисник може да види да се следећа страница са подацима о студенту учитава.