React Router — konspekt

Bu modulda bir sahifali ilovaga "sahifalar" qo’shish o’rganildi: React Router DOM.

Muammo va yechim

SPA’da brauzer bitta HTML oladi — oddiy <a href> bosilsa butun ilova qayta yuklanadi va state yo’qoladi. React Router URL’ni kuzatib, unga mos komponentni almashtiradi — yuklanishsiz.

import { BrowserRouter, Routes, Route } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/kurslar" element={<Kurslar />} />
  </Routes>
</BrowserRouter>

Natija: / da Home, /kurslarda Kurslar komponenti — sahifa qayta yuklanmasdan.

Link va NavLink

Ichki o’tishlar uchun <a> emas, Link ishlatiladi:

<Link to="/kurslar">Kurslar</Link>
<NavLink to="/kurslar">Kurslar</NavLink>

NavLink — menyu uchun Link: joriy sahifaga mos kelsa avtomatik active class oladi, uni CSS’da bezash kifoya.

Tipik xato. Odat bo’yicha <a href="/kurslar"> yozish — ishlagandek ko’rinadi, lekin har bosishda ilova to’liq qayta yuklanadi. Ichki yo’llar — faqat Link/NavLink.

Dynamic route va useParams

Har maqolaga alohida Route yozilmaydi — URL’ning bir qismi parametr bo’ladi:

<Route path="/maqola/:id" element={<MaqolaDetail />} />

function MaqolaDetail() {
  const { id } = useParams();
  const { data } = useFetch(`http://localhost:8000/articles/${id}`);
  // ...
}

Natija: /maqola/3 ochilsa id = "3" — o’sha maqola serverdan olinadi. Ro’yxatdan detail sahifaga o’tish: <Link to={/maqola/${article.id}}>.

Nested Route va Layout

Bo’limning umumiy qismi (sarlavha, yon menyu) layout komponentga chiqariladi; ichki sahifalar uning <Outlet /> joyiga chiziladi:

<Route path="/maqolalar" element={<ArticlesLayout />}>
  <Route index element={<ArticlesList />} />
  <Route path=":id" element={<MaqolaDetail />} />
</Route>

index — ota yo’lning "o’z sahifasi". Breadcrumbs ("yo’l" navigatsiyasi) ham shu daraxtdan quriladi: joriy URL bo’laklariga qarab Link’lar zanjiri chiqariladi.

404 va xatolar

<Route path="*" element={<PageNotFound />} />

* — yuqoridagilarning hech biriga tushmagan barcha manzillar. Router’ning obyekt versiyasida (createBrowserRouter) esa xato sahifasi errorElement bilan beriladi va useRouteError() hook’i xato tafsilotini o’qiydi.

Routes — obyekt versiyasi

Yangi versiyalarda marshrutlarni JSX o’rniga obyekt massivi bilan berish ham mumkin: createBrowserRouter([{ path: "/", element: <Home /> }, ...]) + RouterProvider. Mantiq o’sha — yozuv shakli boshqa; kursda ikkala shakl ham ko’rsatilgan, hujjatlashda ko’proq obyekt shakli uchraydi.

Amaliyot

Uch sahifali ilova yig’ing (Bosh, Maqolalar, Aloqa) — NavLink menyu bilan, active holatni bezang.
Maqolalar ro’yxatidan /maqola/:id detail sahifaga o’tishni qo’shing (useParams + useFetch).
ArticlesLayout yasab, ro’yxat va detail’ni nested route qiling.
path="*" bilan 404 sahifa qo’shing va unda "Bosh sahifaga qaytish" Link’i bering.
Ilovani obyekt-versiya router’ga ko’chirib chiqing.

Modul testini ishlang — oxirgi modulda hammasi uchta amaliy loyihada birlashadi.