ნავიგაციის მდგომარეობა 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 დახმარებით გახადეთ ისე, რომ მომხმარებელმა შეძლოს დაინახოს, რომ შემდეგი გვერდი სტუდენტის მონაცემებით იტვირთება.