Chapter 21 — Routing (React Router)

SPA (Single Page Application)'da bir nechta "sahifa" hissini yaratish uchun client-side routing ishlatiladi.

---

21.1 Asosiy Route'lar

Example

App.jsx
React JSXNusxalash
01import { BrowserRouter, Routes, Route } from "react-router-dom";
02 
03function App() {
04  return (
05    <BrowserRouter>
06      <Routes>
07        <Route path="/" element={<Home />} />
08        <Route path="/products" element={<Products />} />
09        <Route path="*" element={<NotFound />} />
10      </Routes>
11    </BrowserRouter>
12  );
13}

21.2 Dynamic Routes va URL Parametrlari

Example

App.jsx
React JSXNusxalash
01<Route path="/products/:id" element={<ProductDetail />} />
02 
03function ProductDetail() {
04  const { id } = useParams();
05  return <p>Mahsulot ID: {id}</p>;
06}

21.3 Navigation va Protected Routes

Example

App.jsx
React JSXNusxalash
01import { Link, Navigate, useNavigate } from "react-router-dom";
02 
03<Link to="/products">Mahsulotlar</Link>
04 
05function ProtectedRoute({ children }) {
06  const { user } = useAuth();
07  if (!user) return <Navigate to="/login" />;
08  return children;
09}

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: /, /login, /dashboard, /products/:id route'lariga ega mini-dashboard yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01<Routes>
02  <Route path="/products/:id" element={<ProductDetail />} />
03  <Route path="/products/new" element={<NewProduct />} />
04</Routes>

Your Task: /products/new manziliga o'tilganda, kutilmaganda ProductDetail ochilib, id="new" deb ko'rsatilishi mumkin. Nega, va qanday tuzatish kerak?

<details> <summary>Solution</summary> Route'lar tartibga (va aniqlikka) qarab moslashtiriladi — agar `/products/:id` avval yozilsa va React Router versiyasi/konfiguratsiyasi mos kelsa, u `/products/new`ni ham "id=new" deb qabul qilishi mumkin. Aniqroq (static) route'larni dinamik route'lardan oldin joylashtirish tavsiya etiladi: ```jsx <Routes> <Route path="/products/new" element={<NewProduct />} /> <Route path="/products/:id" element={<ProductDetail />} /> </Routes> ``` </details>

📌 Chapter Summary

React Router — SPA'da client-side navigatsiya, dinamik route'lar va himoyalangan sahifalar uchun standart vosita. useParams, <Link>, <Navigate> — routing'ning asosiy vositalari.

🎯 Key Takeaways

• Client-side routing — sahifani to'liq qayta yuklamasdan navigatsiya
• :param — dinamik route segmentlari
• Protected Route — autentifikatsiya asosida yo'naltirish patterni

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01<Route path="/x/:id" element={<X />} />
02const { id } = useParams();
03<Link to="/x">Link</Link>
04<Navigate to="/login" />

---