Маршрутизация на стороне клиента в React Router

На этом уроке мы рассмотрим важную составляющую одностраничных (SPA) приложений - маршрутизацию на стороне клиента. Такая маршрутизация позволяет нам обновлять URL в браузере без дополнительных запросов документа с сервера.

Запустите приложение, которое мы создавали на прошлом уроке. Откройте панель разработчика и в ней вкладку 'Сеть' (Network для Chrome). После каждого клика по нашим ссылкам мы видим каждый раз запрос для document. To есть мы каждый раз просим сервер подгрузить нам document.

Давайте же теперь воспользуемся преимуществами React Router, чтобы избавиться от подобных запросов. Для этого откроем root.jsx нашего приложения и заменим тег a разметки на компонент Link. Для начала добавим его импорт:

import { Outlet, Link } from 'react-router-dom';

Теперь заменим теги a с атрибутом href. Вместо кусочка кода:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

У нас теперь будет следующий код:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Снова открываем вкладку 'Сеть' на панели разработчика, в адресной строке устанавливаем корневой путь и обновляем страничку. Теперь кликаем по ссылкам и видим, что document у нас запрашивался только один раз при изначальной загрузке и при последующих кликах запроса на сервер уже нет.

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, реализуйте в нем маршрутизацию на стороне клиента, переделав ваши ссылки, как описано в уроке.