Клиент томонидаги маршрутлаштириш React Router да

Ушбу дарсда биз бир сахифали (SPA) иловаларнинг мухим қисми - клиент томонидаги маршрутлаштиришни кўриб чиқамиз. Бундай маршрутлаштириш бизга браузердаги URL ни сервердан қўшимча ҳужжат сўровисиз янгилаш имконини беради.

Ўтган дарсда яратган иловамизни ишга туширинг. Ишлаб чиқувчи панелини очинг ва ундаги 'Тармоқ' (Chrome учун Network) варақчасини очинг. Хар бир ҳавола босишдан сўнг биз ҳар сафар ҳужжат учун сўров кўрамиз. Яъни биз ҳар сафар сервердан бизга ҳужжатни юклаб беришини сўраймиз.

Энди 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>

Яна ишлаб чиқувчи панелидаги 'Тармоқ' варақчасини очинг, манзил сатрига асосий йўлни ўрнатиб, саҳифани янгиланг. Энди ҳаволалар босиш орқали кўрамизки, ҳужжат бизда фақат бошланғич юкланганда бир марта сўралган ва кейинги босилганда серверга сўров бўлмаган.

Ўтган дарслардаги вазифалар учун яратган иловангизни олинг. Дарс материалларидан фойдаланиб, унда клиент томонидаги маршрутлаштиришни амалга оширинг, ҳаволалангизни дарсда тавсифилanganidek ўзгартиринг.