React Router-da navigasiýa ýagdaýy

Eger biz sanawdaky önümler üstüne basýan bolsak, ilkinji gezek önüm sahypasynyň gijikmek bilen ýüklenýändigini görýäris, galan bolsa çalt, önüm goşulanda we ýenilende hem şonuň ýaly, sebäbi müşderi tarapynda keş bar.

Bu sapakda biz ulanyjya sahypamyzyň nähili ýagdaýda ýerleşýändigini görkezeris. Bize useNavigation gollary ýardam edip biler. Öz işiniň netijesinde bu gollaryň birnäçe aýratynlyklary bolan bir obýekt çykarýar. Bizi olaryň birinden - state aýratynlygyndan gyzyklanar.

State aýratynlygy 3 bahadan ybarat bolup biler: 'idle' (hiç zat bolmaýar), 'submitting' (forma POST, PUT, PATCH ýa-da DELETE arkaly iberilende action ýollary çagyrylan bolsa), 'loading' (indiki sahypany çyzdyrmak üçin indiki ýol üçin ýükleýji çagyrylan bolsa). Bizi iň soňky baha gyzyklandyrar.

Geliň root.jsx faýlyna girip we bu gollary import edeliň:

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

Soňra, gollaryň yzyna gaýtaryşy üçin, Root funksiýasynda return öň navigation üýtgeýjisini düzeliň:

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

Indi bolsa onuň aýratynlygyndan state peýdalanyň, eger bu baha 'loading' bolsa, onda biz klas loading önümiň maglumatlarynyň çyzylýan ýerleşýän ýeri üçin div üçin:

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

Bizä klas üçin stil goşmak galdy loading içinde index.css. Geliň ýükleme ýagdaýynda ýöne opacity artyryş edeliň:

div.loading {
	opacity: 0.3;
}

Indi, saýty täzeden ýükäp, sanawdaky önümlere basanyňyz ýa-da, mysal üçin, täze önüm goşanyňyz, biz indiki sahypa peýda bolmanka häzirki sahypanyň birneme reňksizleşýändigini göreris.

Öňki sapaklardaky wezipeleriňizde döreden programmanyňyzy alyň. Sapak materiallaryndan peýdalanyp, gollaryň ýardamy bilen useNavigation ulanyjy indiki talyp baradaky maglumatlaryň ýükländigini görmegi üpjün ediň.