Маршрутыраванне на баку кліента ў React Router

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

Запусціце прыкладанне, якое мы стваралі на мінулым уроку. Адкрыйце панэль распрацоўшчыка і у ёй укладку 'Сетка' (Network для Chrome). Пасля кожнага кліку па нашых спасылках мы бачым кожны раз запыт для document. Гэта значыць мы кожны раз просім сервер падгрузіць нам document.

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

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

Цяпер замянім тэгі a з атрыбутам href. Замест кавалка кода:

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

У нас цяпер будзе наступны код:

routes/root.jsx<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Зноў адкрываем укладку 'Сетка' на панэлі распрацоўшчыка, у адрасным радку ўстанаўліваем канявы шлях і абнаўляем старонку. Цяпер клікаем па спасылках і бачым, што document у нас запытваўся толькі адзін раз пры першапачатковай загрузцы і пры наступных кліках запыту на сервер ужо няма.