React Router-da Naviqasiya Veziyyeti

Əgər siyahıdakı məhsullar üzərinde kliklesek, görürük ki, ilk defe məhsul sehifesi gecikme ile yüklenir, qalanlar isə artıq sürətli, eyni şey məhsul əlavə edende ve yenilenede baş verir, çünki bizim müştəri terefinde keş var.

Bu dersde istifadeçiye sehifemizin hansı veziyyetde olduğunu göstereceyik. Bunda bizə useNavigation çökü kömek ede biler. Öz işinin neticesi olaraq bu çök bir sıra xüsusiyyetleri olan bir obyekt verir. Bizi maraqlandıracaq olan onlardan biridir - state xüsusiyyeti.

state xüsusiyyeti 3 qiymet ala biler: 'idle' (heç nə baş vermir), 'submitting' (forma gönderilende POST, PUT, PATCH ve ya DELETE ile action çağırılanda), 'loading' (növbəti marşrut üçün yükleici çağırılanda, növbəti sehifeni çıxartmaq üçün). Bizi sonuncu qiymet maraqlandıracaq.

Gəlin root.jsx faylına keçek ve bu çökü import edek:

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

Sonra, çökün qaytardığı netice üçün, Root funksiyasında navigation dəyişkeni təyin edek - return-dən əvvəl:

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

İndi isə onun state xüsusiyyetinden istifade edek, əgər bu qiymet 'loading' olarsa, biz məhsul məlumatlarının çıxarıldığı div üçün loading klassi təyin edeceyik:

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

Bizə loading klassi üçün index.css faylına stil əlavə etmek qalır. Gəlin yükleme veziyyetinde sadəcə opacity-i artıraq:

div.loading {
	opacity: 0.3;
}

İndi, saytı yenidən yüklemiş halda, siyahıdakı məhsullar üzərinde kliklesek ve ya, məsələn, yeni məhsul əlavə etsek, görərik ki, cari sehife növbəti sehife peyda olmamışdan əvvəl bir anlıq solğunlaşacaq.

Əvvəlki derslerin tapşırıqlarında yaratdığınız proqramı götürün. Ders materiallarından istifade ederek, useNavigation çökü vasitesile elə edin ki, istifadeçi növbəti tələbə məlumatları sehifesinin yüklendiyini görə bilsin.