React Routerda Navigatsiya Holati

Agar biz ro‘yxatdagi mahsulotlarni bosak, ko‘ramizki, birinchi marta mahsulot sahifasi kechikish bilan yuklanadi, qolganlarida esa tezroq, xuddi shu narsa mahsulot qo‘shish va yangilashda ham, chunki bizda mijji tomonda kesh mavjud.

Ushbu darsda biz foydalanuvchiga sahifamiz qanday holatda ekanligini ko‘rsatamiz. Bunda bizga useNavigation hooki yordam beradi. Ushbu hook o‘z ishining natijasida bir qator xususiyatlariga ega ob'ektni qaytaradi. Bizni uning bitta xususiyati - state xususiyati qiziqtiradi.

state xususiyati 3 qiymatga ega bo‘lishi mumkin: 'idle' (hech narsa bo‘lmayapti), 'submitting' (forma POST, PUT, PATCH yoki DELETE orqali yuborilganda marshrutning actioni chaqirilganda), 'loading' (keyingi marshrut uchun yuklovchi chaqirilganda, keyingi sahifani chizish uchun). Bizni oxirgi qiymat qiziqtiradi.

Keling, root.jsx fayliga kiraylik va ushbu hookni import qilaylik:

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

Keyin, hook qaytaradigan natija uchun, Root funksiyasida navigation o‘zgaruvchisini e'lon qilamiz - returndan oldin:

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

Endi uning state xususiyatidan foydalanamiz, agar u 'loading' qiymatiga ega bo‘lsa, biz mahsulot ma'lumotlari chizilayotgan div uchun loading klassini o‘rnatamiz:

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

Bizga loading klassi uchun uslublarni index.css fayliga qo‘shish qoldi. Keling yuklash holatida shunchaki opacityni oshiramiz:

div.loading {
	opacity: 0.3;
}

Endi, saytni qayta yuklab, ro‘yxatdagi mahsulotlarni bosish yoki, masalan, yangi mahsulot qo‘shish orqali biz ko‘ramizki, keyingi sahifa paydo bo‘lishidan oldin joriy sahifa bir lahzaga xiraroq bo‘lib qoladi.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, useNavigation hooki yordamida foydalanuvchi keyingi talaba ma'lumotlari sahifasi yuklanganini ko‘ra olishi uchun qiling.