React Router-da mijoz tomondagi marshrutizatsiya

Ushbu darsda biz bir sahifali (SPA) ilovalarning muhim tarkibiy qismi - mijoz tomondagi marshrutizatsiyani ko'rib chiqamiz. Bunday marshrutizatsiya bizga brauzerdagi URLni serverdan qo'shimcha hujjat so'rovlarisiz yangilash imkonini beradi.

Oldingi darsda yaratgan ilovamizni ishga tushiring. Ishlab chiquvchilar panelini oching va unda 'Tarmoq' (Chrome uchun Network) yorlig'ini oching. Har bir havolamiz ustiga bosganimizdan keyin har safar document uchun so'rov ko'ramiz. Ya'ni biz har safar serverdan bizga document yuklashni so'raymiz.

Keling, endi bunday so'rovlardan xalos bo'lish uchun React Router imkoniyatlaridan foydalanaylik. Buning uchun ilovamizning root.jsx faylini ochamiz va belgilash tilidagi a teglarini Link komponentiga almashtiramiz. Avval uni import qilamiz:

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

Endi href atributiga ega bo'lgan a teglarini almashtiramiz. Kod bo'lagi o'rniga:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Endi bizda quyidagi kod bo'ladi:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Yana ishlab chiquvchilar panelidagi 'Tarmoq' yorlig'ini oching, manzillar satrida ildiz yo'lini o'rnating va sahifani yangilang. Endi havolalar ustiga bosamiz va ko'ramizki, document faqat dastlabki yuklash paytida so'ralgan va keyingi bosishlarda serverga so'rov endi yo'q.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, unda mijoz tomondagi marshrutizatsiyani amalga oshiring, havolalaringizni darsda tavsiflanganidek o'zgartiring.