Клиент жағындағы маршрутизация React Router-де

Бұл сабақта біз бірбетті (SPA) қолданбалардың маңызды құрамдас бөлігі - клиент жағындағы маршрутизацияны қарастырамыз. Мұндай маршрутизация бізге браузердегі URL-ді серверден құжатты қосымша сұраусыз жаңартуға мумкіндік береді.

Біз өткен сабақта жасаған қолданбаны іске қосыңыз. Әзірлеуші панелін ашып, онда 'Желі' (Chrome үшін Network) бетін ашыңыз. Біздің сілтемелерге әрбір басқан сайын biz әр уақытта document үшін сұрау көреміз. Яғни biz әр уақытта серверден бізге document жүктеуді сұраймыз.

Енді осындай сұраулардан арылу үшін React Router-дің артықшылықтарын пайдаланайық. Ол үшін қолданбамыздың root.jsx файлын ашып, a тегін Link компонентіне ауыстырамыз. Алдымен оның импортын қосамыз:

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

Енді href атрибуты бар a тегтерін ауыстырамыз. Код фрагментінің орнына:

<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 бізде тек бір рет сұралғанын көреміз - бастапқы жүктеу кезінде және кейінгі басу кезінде серверге сұрау болмайды.

Өткен сабақтарға арналған тапсырмаларда жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, онда клиент жағындағы маршрутизацияны жүзеге асырыңыз, сілтемелеріңізді сабақта сипатталғандай өзгертіңіз.