Състояние на навигацията в React Router

Ако кликнем върху продукти в списъка, виждаме, че първият път страницата с продукта се зарежда със забавяне, а следващите пъти вече бързо, същото се отнася за добавяне и обновяване на продукт, тъй като имаме кеш от страна на клиента.

В този урок ще покажем на потребителя в какво състояние се намира нашата страница. В това може да ни помогне хукът useNavigation. Резултатът от работата си този хук връща обект с редица свойства. Нас ще ни интересува едно от тях - свойството state.

Свойството state може да има 3 стойности: 'idle' (нищо не се случва), 'submitting' (когато при изпращане на форма чрез POST, PUT, PATCH или DELETE е извикан action на маршрута), 'loading' (когато е извикан зареждач за следващия маршрут, за да се изобрази следващата страница). Нас ще ни интересува последната стойност.

Нека влезем във файла root.jsx и импортираме този хук:

routes/root.jsximport { useNavigation } from 'react-router-dom';

След това, за върнатия от хука резултат, ще създадем променлива navigation във функцията Root - преди return:

routes/root.jsxconst { products } = useLoaderData();
const navigation = useNavigation();

А сега нека използваме нейното свойство state, ако това е стойност 'loading', тогава ще зададем клас loading за div, в който се изобразяват данните за продукта:

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

Остава да добавим стилове за класа loading във index.css. Нека в случай на състояние на зареждане просто увеличаваме opacity:

index.cssdiv.loading {
  opacity: 0.3;
}

Сега, ако презаредим сайта и кликнем върху продукти в списъка или, например, добавим нов продукт, ще видим, че текущата страница за миг ще избелее, преди да се появи следващата.