React Router'до кардар тараптагы багыттоо

Бул сабакта биз бир барактуу (SPA) колдонмолордун маанилүү курамын - кардар тараптагы багыттоону карайбыз. Мына ушундай багыттоо бизге браузердеги URL'ди серверден документти кошумча суралбай жаңыртууга мүмкүндүк берет.

Биз өткөн сабакта түзгөн колдонмону иштетиңиз. Өнүктүрүү панелин ачып, анын ичиндеги 'Тармак' (Chrome үчүн Network) кош жалын ачыңыз. Биздин шилтемелерге ар бир чыкылдатуудан кийин ар жолу document үчүн сураныш көрөбүз. Башкача айтканда, биз ар жолу серверден бизге 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 бизде бир гана жолу баштапкы жүктөлүү убагында суралганын жана кийинки чыкылдатууларда серверге сураныш калбаганын көрөбүз.

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