Стан навігацыі ў 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 зрабіце так, каб юзэр мог бачыць, што наступная старонка з дадзенымі студэнта падгружаецца.