Ҳолати навигатсия дар React Router

Агар мо ба маҳсулотҳо дар рӯйхат клик кунем, мо мебинем, ки бори аввал саҳифаи маҳсулот бо таъхир бор мешавад, ва баъдтар боз тез, ҳамчунин дар вақти илова ва навсозии маҳсулот, зеро мо кэш дар тарафи клиент дорем.

Дар ин дарс мо ба корбар нишон медиҳем, ки саҳифаи мо дар кадом ҳолат қарор дорад. Дар ин ба мо ҳук useNavigation кӯмак карда метавонад. Натиҷаи кор ин ҳук як объект бо як қатор хусусиятҳо медиҳад. Моро яке аз онҳо - хусусияти state таваҷҷӯҳ хоҳад буд.

Хусусияти state метавонад 3 қимат дошта бошад: 'idle' (ҳеҷ чӣ намешавад), 'submitting' (вақте ки дар вақти фиристодани форми тавассути POST, PUT, PATCH ё DELETE action -и масир даъват шудааст), 'loading' (вақте ки даъват шудааст боркунак барои масири навбатӣ, то ки саҳифаи навбатиро тасвир кунем). Моро қимати охирин таваҷҷӯҳ хоҳад буд.

Биёед ба файли root.jsx дароем ва ин ҳукро ворид кунем:

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

Сипас, барои натиҷае, ки ҳук бармегардонад, тағирёбандаи navigation дар функсияи Root эълон кунем - пеш аз 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 чунон кунед, то ки корбар битавонад бинад, ки саҳифаи навбатӣ бо додаҳои донишҷӯй бор карда мешавад.