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

Вазьміце прыкладанне, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, рэалізуйце ў ім маршрутыраванне на баку кліента, перарабіўшы вашы спасылкі, як апісана ў уроку.