Маршрутизация на стороне клиента в React Router
На этом уроке мы рассмотрим важную составляющую одностраничных (SPA) приложений - маршрутизацию на стороне клиента. Такая маршрутизация позволяет нам обновлять URL в браузере без дополнительных запросов документа с сервера.
Запустите приложение, которое мы создавали на
прошлом уроке. Откройте панель разработчика и
в ней вкладку 'Сеть' (Network для Chrome).
После каждого клика по нашим ссылкам мы
видим каждый раз запрос для document. То есть
мы каждый раз просим сервер подгрузить нам
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 у нас запрашивался
только один раз при изначальной загрузке
и при последующих кликах запроса на
сервер уже нет.
Как работает маршрутизация на стороне клиента вы будете видеть и на следующих уроках.
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, реализуйте в нем маршрутизацию на стороне клиента, переделав ваши ссылки, как описано в уроке.