11.9-bob: Routing (React Router)

  ROUTING — URL'ni (manzil) UI bilan (qaysi komponent) BOG'LASH:

  URL                        KO'RINADIGAN KOMPONENT
  /                          <Home />
  /products                  <ProductList />
  /products/42               <ProductDetail id={42} />
  /cart                      <Cart />
  /profile                   <Profile />

  NEGA KERAK (URL — holat sifatida):
   Ulashish — foydalanuvchi URL'ni do'stiga yuboradi  o'sha sahifa ochiladi
   Bookmark — sahifani saqlash (favoritlar)
   Orqaga/oldinga — brauzer tugmalari ishlaydi (tarix)
   Yangilash — sahifani yangilaganda o'sha joyda qoladi
   SEO — har sahifaning o'z URL'i (qidiruv tizimi indekslaydi — 13.8)

   URL'siz SPA: hamma narsa bitta manzilda  ulashib/saqlab/orqaga qilib bo'lmaydi (yomon)
   Routing — URL'ni ilovaning HOLATI qiladi (bashoratli, ulashiladigan)

  SERVER ROUTING (an'anaviy — har URL = server'dan YANGI sahifa):
  /products bosildi  brauzer server'ga so'rov  server YANGI HTML qaytaradi  sahifa qayta yuklanadi
   har o'tishda: oq ekran, to'liq yuklanish (sekin, lekin SEO oson)

  CLIENT-SIDE ROUTING (SPA — React Router — sahifa qayta yuklanMAYDI):
  /products bosildi  React Router URL'ni o'zgartiradi (History API)  o'sha komponentni render
   server'ga bormaydi, oq ekran yo'q, DARROV almashadi (tez, silliq)

  ┌──────────────────────────────────────────────────────────────┐
  │ Server: har URL  server so'rovi  yangi HTML (qayta yuklanish) │
  │ Client: URL o'zgaradi  React komponent almashtiradi (yuklanish  │
  │         yo'q) — brauzer History API orqali                     │
  └──────────────────────────────────────────────────────────────┘

  BRAUZER HISTORY API (client routing'ning poydevori):
  - history.pushState() — URL'ni O'ZGARTIRADI (sahifa yuklamacdan)
  - popstate hodisasi — orqaga/oldinga tugmalari (React Router tinglaydi)

   Client routing tez (oq ekran yo'q), lekin SEO qiyin (bo'sh HTML  Next.js SSR — 13.3)
   React Router — History API ustiga qurilgan (URL'ni kuzatadi, komponent almashtiradi)

  O'RNATISH:
  npm install react-router-dom        # React Router (web uchun)

  IKKI USUL (React Router v6.4+):

  1. ESKI / ODDIY — <BrowserRouter> + JSX <Routes> (oddiy ilovalar uchun):
  // main.jsx
  import { BrowserRouter } from "react-router-dom";
  createRoot(...).render(
    <BrowserRouter>          {/* butun ilovani o'raydi (History API ulaydi) */}
      <App />
    </BrowserRouter>
  );

  2. YANGI / DATA ROUTER — createBrowserRouter (loader/action — 2.13, tavsiya):
  const router = createBrowserRouter([
    { path: "/", element: <Home /> },
    { path: "/products", element: <ProductList />, loader: productsLoader },
  ]);
  <RouterProvider router={router} />

  ┌──────────────────────────────────────────────────────────┐
  │ BrowserRouter + <Routes>: oddiy, JSX'da (kichik ilova)     │
  │ createBrowserRouter: data API (loader/action — katta — 2.13)│
  └──────────────────────────────────────────────────────────┘

   BrowserRouter (yoki RouterProvider) butun ilovani o'raydi (eng tepada — main.jsx)
   Bu bobda asosan JSX <Routes> sintaksisi (tushunarli); data router 2.13'da

  <Routes> va <Route> — URL'ni komponentga bog'laydi:

  <Routes>                                       {/* faqat BITTA mos Route'ni ko'rsatadi */}
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/products" element={<ProductList />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>

  - <Routes> — barcha Route'larni ko'rib, joriy URL'ga ENG MOS kelganini tanlaydi
  - <Route path="..." element={<Komponent />} /> — bitta yo'l  komponent
  - path: "/" (bosh), "/about" (statik), "/user/:id" (dinamik — 2.6)
  - element: ko'rsatiladigan JSX (komponent)

  ┌──────────────────────────────────────────────────────────┐
  │ URL: /products    <Routes> mos Route'ni topadi    render  │
  │ Faqat BITTA Route ko'rinadi (URL'ga eng mos kelgani)        │
  └──────────────────────────────────────────────────────────┘

   <Routes> — switch kabi: faqat bitta (eng mos) Route'ni render qiladi
   element={<Komponent />} (JSX) — element={Komponent} (havola) EMAS

  <Link> — sahifa qayta yuklamay navigatsiya (oddiy <a> EMAS!):
  <Link to="/products">Mahsulotlar</Link>
  //  <a href="/products"> — sahifani QAYTA YUKLAYDI (SPA buziladi — 2.2)
  //  <Link to="..."> — client-side (History API — qayta yuklamaydi)

  <NavLink> — Link + FAOL holatni biladi (joriy sahifa menyuda ajralib tursin):
  <NavLink
    to="/products"
    className={({ isActive }) => isActive ? "active" : ""}   // faol bo'lsa "active" klass
  >
    Mahsulotlar
  </NavLink>
  //  /products'da bo'lsak, bu havola "active" klass oladi (CSS bilan ajratamiz)

  ┌──────────────────────────────────────────────────────────┐
  │ <a href>: sahifa qayta yuklanadi (SPA buziladi) — ISHLATMA │
  │ <Link to>: client navigatsiya | <NavLink>: + faol holat   │
  └──────────────────────────────────────────────────────────┘

   Ilova ICHIDA — har doim <Link>/<NavLink> (oddiy <a> faqat TASHQI saytlarga)
   NavLink — navbar/menyu uchun (joriy sahifani ko'rsatish — UX)

  DINAMIK SEGMENT — URL'ning O'ZGARUVCHAN qismi (`:` bilan — masalan id):

  <Route path="/products/:id" element={<ProductDetail />} />
  //                    └─ dinamik (har qanday qiymat: /products/42, /products/abc)

  KOMPONENTDA — useParams() bilan o'qiymiz:
  function ProductDetail() {
    const { id } = useParams();        // URL'dan id (string — "42")
    // bu id bilan ma'lumot olamiz (11.7 useFetch yoki 12.4):
    const { data } = useFetch(`/api/products/${id}`);
    return <h1>{data?.name}</h1>;
  }

  KO'P SEGMENT:
  <Route path="/users/:userId/posts/:postId" element={<Post />} />
  const { userId, postId } = useParams();   // ikkalasi ham

  ┌──────────────────────────────────────────────────────────┐
  │ /products/:id    /products/42    useParams().id === "42" │
  │ Bitta Route  cheksiz sahifa (har id — boshqa mahsulot)    │
  └──────────────────────────────────────────────────────────┘

   useParams qiymatlari — har doim STRING (raqam kerak bo'lsa Number(id))
   Dinamik segment — bitta Route bilan ko'p sahifa (mahsulot, profil, post...)

  MUAMMO: ko'p sahifada UMUMIY qism bor (navbar, sidebar, footer) — takrorlama!

  YECHIM — NESTED ROUTES (ichma-ich) + <Outlet> (bola route shu yerda render bo'ladi):

  <Routes>
    <Route path="/" element={<Layout />}>        {/* ota — umumiy qobiq */}
      <Route index element={<Home />} />          {/* /  Home (index — 2.8) */}
      <Route path="products" element={<Products />} />   {/* /products */}
      <Route path="about" element={<About />} />          {/* /about */}
    </Route>
  </Routes>

  // Layout — umumiy qism + <Outlet> (bola route O'RNI):
  function Layout() {
    return (
      <div>
        <Navbar />                {/* har sahifada */}
        <main>
          <Outlet />              {/*  bu yerda bola route (Home/Products/About) render bo'ladi */}
        </main>
        <Footer />                {/* har sahifada */}
      </div>
    );
  }

  ┌──────────────────────────────────────────────────────────┐
  │ Layout (Navbar + Outlet + Footer) — o'zgarmaydi            │
  │ <Outlet> ichi — URL'ga qarab almashadi (Home/Products...)  │
  └──────────────────────────────────────────────────────────┘

   Outlet — "bola route bu yerda ko'rinadi" (layout'ning o'zgaruvchan qismi)
   Nested routes — takrorni yo'qotadi (navbar/footer bir marta — Layout'da)

  INDEX ROUTE — ota yo'lining O'ZI ochilganda ko'rinadigan bola (default):
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />        {/* /  Home (path'siz, "index") */}
    <Route path="products" element={<Products />} />
  </Route>
  // /   Layout + Home (index)
  // /products  Layout + Products

  CATCH-ALL (404) — hech bir route mos kelmasa (* — "qolgan hammasi"):
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/products" element={<Products />} />
    <Route path="*" element={<NotFound />} />   {/*  hech qaysiga mos kelmasa — 404 */}
  </Routes>

  ┌──────────────────────────────────────────────────────────┐
  │ index: ota yo'lining default bolasi (/  Home)             │
  │ path="*": mos kelmagan har URL (404 sahifa) — ENG OXIRDA   │
  └──────────────────────────────────────────────────────────┘

   index — path o'rniga (ota yo'lining "uy" sahifasi)
   "*" 404 uchun — noto'g'ri URL'da foydalanuvchi yo'qolmasin (UX)

  useNavigate — KODDAN (bosish emas) navigatsiya qilish (hodisa/effekt natijasida):

  function LoginForm() {
    const navigate = useNavigate();
    async function handleSubmit(e) {
      e.preventDefault();
      await api.login(...);
      navigate("/dashboard");        //  login MUVAFFAQIYATLI  dashboard'ga o'tkaz
    }
  }

  USULLAR:
  navigate("/products")              // o'sha sahifaga
  navigate("/products", { replace: true })   // tarixni ALMASHTIR (orqaga bossa login'ga qaytmasin)
  navigate(-1)                       // ORQAGA (bitta qadam — brauzer "orqaga" kabi)
  navigate(1)                        // oldinga
  navigate("/cart", { state: { from: "product" } })   // qo'shimcha ma'lumot uzatish 2.11-bob

  QACHON useNavigate (Link emas):
   Hodisa natijasida (login/forma yuborilgach  boshqa sahifaga)
   Shart bajarilgach (ruxsat yo'q  login'ga, vaqt tugadi  bosh sahifaga)
   Taymer/effekt (3s'dan keyin yo'naltirish)

   Foydalanuvchi BOSADIGAN navigatsiya  <Link>; KOD qiladigan  useNavigate
   replace: true — almashtiradi (forma/login'dan keyin — orqaga qaytarmasin)

  QUERY STRING — URL'ning "?" dan keyingi qismi (filtr/saralash/sahifa holati):
  /products?category=phones&sort=price&page=2
  //         └────────────── query params ──────────┘

  useSearchParams — query'ni O'QISH va YOZISH (URL'da state saqlash):
  const [searchParams, setSearchParams] = useSearchParams();

  // O'QISH:
  const category = searchParams.get("category");   // "phones"
  const page = Number(searchParams.get("page")) || 1;

  // YOZISH (URL'ni yangilaydi — sahifa qayta yuklanmaydi):
  setSearchParams({ category: "laptops", page: "1" });   // /products?category=laptops&page=1

  NEGA query (state emas, URL'da):
   Ulashiladigan (filtrlangan natija URL'i — do'stga yuborish)
   Orqaga/yangilash ishlaydi (filtr saqlanadi)
   Bookmark qilinadigan

  ┌──────────────────────────────────────────────────────────┐
  │ Filtr/saralash/sahifa holati  query params (URL'da)       │
  │  ulashiladigan, saqlanadigan (useState'dan afzal bu yerda)│
  └──────────────────────────────────────────────────────────┘

   Filtr/sahifani query'da saqla (useState emas) — ulashib/saqlab bo'ladi
   searchParams qiymatlari — string (raqam kerak bo'lsa Number)

  useLocation — joriy URL haqida MA'LUMOT (qaysi manzildamiz):
  const location = useLocation();
  location.pathname   // "/products"  (yo'l)
  location.search     // "?sort=price" (query)
  location.hash       // "#section"
  location.state      // navigate'dan uzatilgan qo'shimcha ma'lumot 2.9-bob

  NAVIGATION STATE — sahifalar orasida ma'lumot uzatish (URL'da KO'RINMAY):
  // Yuborish:
  navigate("/checkout", { state: { product: selectedProduct } });
  // Olish (yangi sahifada):
  const location = useLocation();
  const product = location.state?.product;

  TIPIK ishlatish:
  - "qayerdan keldi" (login'dan keyin oldingi sahifaga qaytarish):
    navigate("/login", { state: { from: location.pathname } });
  - modal/scroll holati; o'tishda vaqtincha ma'lumot

   location.state — URL'da ko'rinmaydi (yangilaganda YO'QOLADI — vaqtincha ma'lumot uchun)
   Muhim/saqlanishi kerak ma'lumot — query 2.10-bob yoki state management (12), location.state emas

  PROTECTED ROUTE — faqat AUTENTIFIKATSIYADAN o'tgan foydalanuvchi kira oladi:

  function ProtectedRoute({ children }) {
    const { user } = useAuth();                  // 11.7 — Context'dan user
    const location = useLocation();
    if (!user) {
      //  kirmagan  login'ga (va "qayerga bormoqchi edi"ni sakla — 2.11)
      return <Navigate to="/login" state={{ from: location.pathname }} replace />;
    }
    return children;                             // kirgan  sahifani ko'rsat
  }

  ISHLATISH (himoyalangan route'ni o'rash):
  <Route path="/dashboard" element={
    <ProtectedRoute><Dashboard /></ProtectedRoute>
  } />

  // YOKI nested layout sifatida (barcha bola route himoyalangan):
  <Route element={<ProtectedRoute><Layout/></ProtectedRoute>}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/settings" element={<Settings />} />
  </Route>

  ┌──────────────────────────────────────────────────────────┐
  │ kirgan  sahifa; kirmagan  <Navigate to="/login" replace> │
  │ <Navigate> — deklarativ yo'naltirish (komponent kabi)       │
  └──────────────────────────────────────────────────────────┘

   <Navigate> — render paytida yo'naltiradi (useNavigate — hodisada; Navigate — JSX'da)
   Frontend guard — UX uchun; HAQIQIY himoya BACKEND'da (token tekshirish — 5.16, 14)

  LAZY ROUTES (11.8 bilan) — har sahifani alohida chunk:
  const Dashboard = lazy(() => import("./pages/Dashboard"));
  <Route path="/dashboard" element={
    <Suspense fallback={<PageLoader/>}><Dashboard/></Suspense>
  } />

  DATA ROUTER (createBrowserRouter — 2.3) — LOADER/ACTION (ma'lumot route darajasida):
  const router = createBrowserRouter([
    {
      path: "/products/:id",
      element: <ProductDetail />,
      loader: async ({ params }) => {            //  sahifa RENDER'dan OLDIN ma'lumot yuklaydi
        return fetch(`/api/products/${params.id}`).then(r => r.json());
      },
    },
  ]);
  // Komponentda:
  function ProductDetail() {
    const product = useLoaderData();             // loader qaytargan ma'lumot (tayyor!)
    return <h1>{product.name}</h1>;
  }

  LOADER afzalligi (useEffect+fetch'dan):
   Ma'lumot render'dan OLDIN yuklanadi ("render-as-you-fetch" — tez)
   Loading/waterfall muammosi kamayadi; URL bilan birga ma'lumot
   action — forma yuborish (POST) route darajasida

   Data router (loader/action) — React Router 6.4+ (Remix'dan); katta ilovada tavsiya
   Lekin amalda ko'p loyiha TanStack Query 12.4-bob ishlatadi (kesh/sync kuchli)

  REACT ROUTER VERSIYALARI (2026):
  - v6 — keng tarqalgan (createBrowserRouter, data API, hooks)
  - v7 — eng yangi (Remix bilan birlashdi); v6 bilan deyarli mos, framework rejimi ham bor
   bu bobdagi hammasi v6 va v7'da ishlaydi (asosiy API barqaror)

  ROUTING ARXITEKTURASI (toza ilova):
  src/
  ├── pages/           sahifa komponentlari (Home, Products, Profile — 11.3: 2.9)
  ├── routes/          route ta'riflari (router config, protected routes)
  ├── components/      Layout, Navbar (Outlet bilan)
  └── App.jsx          <RouterProvider> yoki <Routes>

  ALTERNATIVALAR (kontekst):
  - TanStack Router — type-safe routing (TypeScript kuchli)
  - Next.js (13) — file-based routing (papka = route, avtomatik — 13.2)

  ┌──────────────────────────────────────────────────────────┐
  │ React Router — SPA (Vite) standarti                        │
  │ Next.js — file-based (papka strukturasi = route — 13.2)    │
  └──────────────────────────────────────────────────────────┘

   React Router v6/v7 — Vite/SPA uchun standart (bu bob)
   Next.js'da routing BOSHQACHA (file-based, avtomatik — 13-QISM)

  UCH XIL ROUTER (URL'ni QAYERDA saqlaydi):

  BrowserRouter — TOZA URL (History API), tavsiya:
  /products/42            (chiroyli, SEO'ga mos)
   Server SPA fallback kerak (yangilaganda 404 bo'lmasin — Xato 2)

  HashRouter — URL'da "#" (hash qismi):
  /#/products/42          (# dan keyingi qism server'ga BORMAYDI)
   Server sozlash kerak EMAS (static hosting — GitHub Pages); lekin URL xunuk, SEO yomon

  MemoryRouter — URL'ni brauzerda EMAS, XOTIRADA saqlaydi:
  (manzil satri o'zgarmaydi) — test, Storybook, React Native uchun

  ┌──────────────────────────────────────────────────────────┐
  │ BrowserRouter: toza URL (standart) — server fallback kerak │
  │ HashRouter: /#/ (static hosting) | MemoryRouter: test/RN   │
  └──────────────────────────────────────────────────────────┘

   Deyarli har doim BrowserRouter (toza URL); HashRouter faqat server sozlab bo'lmaganda

  SPLAT (*) — "qolgan barcha yo'lni ushla" (catch-all yoki fayl yo'llar):
  <Route path="files/*" element={<Files />} />
  // /files/docs/2026/hisobot.pdf    useParams()["*"] === "docs/2026/hisobot.pdf"

  OPTIONAL SEGMENT (v6.4+, "?" bilan) — bor ham, yo'q ham bo'lishi mumkin:
  <Route path="/products/:id?" element={<Products />} />
  // /products VA /products/42 — ikkalasi ham mos

  RELATIVE vs ABSOLUTE yo'l (nested route ichida):
  <Link to="/products">    ABSOLUTE (har doim /products — ildizdan)
  <Link to="edit">         RELATIVE (joriy route'ga nisbatan — /users/42/edit)
  <Link to="..">           bir daraja YUQORI (parentga)
  navigate(".."), navigate("../settings")   // navigate ham relative

  ┌──────────────────────────────────────────────────────────┐
  │ "*": qolgan yo'l (catch-all/fayl) | ":id?": ixtiyoriy      │
  │ "/x": absolute | "x", "..": relative (joriy route'dan)     │
  └──────────────────────────────────────────────────────────┘

   Nested route ichida relative yo'l qulay (kod ko'chirsa ham to'g'ri qoladi)
   "/" bilan boshlanmagan yo'l — RELATIVE (joriy route bilan qo'shiladi)

  DATA ROUTER'da xato boshqaruvi (loader/action/render xatosini USHLASH):

  const router = createBrowserRouter([
    {
      path: "/products/:id",
      element: <ProductDetail />,
      loader: productLoader,           // xato tashlasa (throw) yoki 404 Response...
      errorElement: <RouteError />,    //  ...bu ko'rsatiladi (element o'rniga)
    },
  ]);

  function RouteError() {
    const error = useRouteError();     // ushlangan xato (yoki Response)
    if (error.status === 404) return <h1>Sahifa topilmadi</h1>;
    return <h1>Xatolik: {error.message}</h1>;
  }

  ┌──────────────────────────────────────────────────────────┐
  │ errorElement: route'dagi xatoni ushlaydi (loader/render)   │
  │ useRouteError(): ushlangan xatoni o'qish (status/message)  │
  └──────────────────────────────────────────────────────────┘

   errorElement — data router uchun Error Boundary 11.6-bob analogi (route darajasida)
   Eng tepadagi errorElement — butun ilova uchun "zaxira" xato sahifasi

  useNavigation — DATA ROUTER'da o'tish HOLATINI biladi (loader yuklanmoqda?):

  function GlobalSpinner() {
    const navigation = useNavigation();
    // navigation.state: "idle" | "loading" | "submitting"
    return navigation.state === "loading" ? <TopProgressBar /> : null;
  }
  //  sahifa loader'i yuklanayotganda global progress bar (silliq UX)

  defer + Await — SEKIN ma'lumotni KUTMAY sahifani ko'rsatish (streaming):
  loader: () => defer({ reviews: fetch(...).then(r => r.json()) });   // kutmaydi
  // Komponentda:
  const { reviews } = useLoaderData();
  <Suspense fallback={<Spinner/>}>
    <Await resolve={reviews}>{(data) => <Reviews items={data} />}</Await>
  </Suspense>

  ┌──────────────────────────────────────────────────────────┐
  │ useNavigation: o'tish holati (loading/submitting)  pending UI│
  │ defer/Await: sekin qismni kutmay ko'rsat (streaming — tez)  │
  └──────────────────────────────────────────────────────────┘

   useNavigation — data router loader'i uzoq bo'lganda "yuklanmoqda" ko'rsatish (UX)
   defer — muhim qismni darrov, sekin qismni (izohlar) keyin (kutish yo'q)

  SCROLL RESTORATION — sahifa o'tishida scroll pozitsiyasi (SPA muammosi):
  // Muammo: /products (pastga scroll qilingan)  /cart  ORQAGA  scroll eski joyda EMAS
  // Data router — <ScrollRestoration /> (avtomatik: orqaga  eski scroll, yangi  tepaga)
  <ScrollRestoration />          // root layout'da bir marta

  useMatch — joriy URL berilgan naqshga MOS kelishini tekshirish (bool/obyekt):
  const match = useMatch("/products/:id");   // /products/42  obyekt; boshqa  null
  // masalan tab yoki breadcrumb "faol"ligini aniqlash uchun

  BREADCRUMB (non  mahsulot  tafsilot yo'lchisi) — nested route + handle:
  { path: "products", handle: { crumb: "Mahsulotlar" }, children: [...] }
  const matches = useMatches();   // joriy mos route'lar zanjiri  breadcrumb quramiz

   ScrollRestoration — SPA'da "orqaga bosganda scroll qayerda edi" muammosini hal qiladi
   useMatches + route.handle — breadcrumb (yo'lchi) qurishning toza usuli

SETUP 2.3-bob:       <BrowserRouter><App/></BrowserRouter>  (main.jsx)
ROUTES 2.4-bob:      <Routes><Route path="/x" element={<X/>}/></Routes>
LINK 2.5-bob:        <Link to="/x">  |  <NavLink to="/x" className={({isActive})=>...}>
PARAM 2.6-bob:       <Route path="/u/:id"/>    const { id } = useParams()
NESTED 2.7-bob:      <Route path="/" element={<Layout/>}> <Route path="x"/> </Route>  + <Outlet/>
INDEX/404 2.8-bob:   <Route index element={<Home/>}/>  |  <Route path="*" element={<NotFound/>}/>
NAVIGATE 2.9-bob:    const nav = useNavigate(); nav("/x", { replace: true }) | nav(-1)
QUERY 2.10-bob:      const [sp, setSp] = useSearchParams(); sp.get("page"); setSp({page:"2"})
LOCATION 2.11-bob:   const loc = useLocation(); loc.pathname | loc.state
GUARD 2.12-bob:      {!user && <Navigate to="/login" state={{from}} replace/>}
LOADER 2.13-bob:     createBrowserRouter([{path, element, loader}]) + useLoaderData()
ROUTER 2.15-bob:     <BrowserRouter> (toza URL) | <HashRouter> (/#/) | <MemoryRouter> (test)
SPLAT/OPT 2.16-bob:  path="files/*"  sp["*"]  |  path="/x/:id?" (ixtiyoriy)  |  to="../x" (relative)
ERROR 2.17-bob:      { ..., errorElement: <Err/> } + const e = useRouteError()
PENDING 2.18-bob:    const nav = useNavigation(); nav.state === "loading"  |  defer + <Await>
SCROLL/MATCH2.19-bob:<ScrollRestoration/>  |  const m = useMatch("/x/:id")  |  useMatches()

// main.jsx
import { BrowserRouter } from "react-router-dom";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(
  <BrowserRouter>          {/* butun ilovani o'raydi (History API) */}
    <App />
  </BrowserRouter>
);

// App.jsx
import { Routes, Route } from "react-router-dom";
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/products" element={<Products />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

import { Link, NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      {/* oddiy Link */}
      <Link to="/">Logo</Link>

      {/* NavLink — faol sahifa ajralib turadi */}
      <NavLink to="/products" className={({ isActive }) => (isActive ? "active" : "")}>
        Mahsulotlar
      </NavLink>
      <NavLink to="/about" style={({ isActive }) => ({ fontWeight: isActive ? "bold" : "normal" })}>
        Biz haqimizda
      </NavLink>
      <NavLink to="/cart"> Savat</NavLink>
    </nav>
  );
}
//  <a href> ISHLATMA (sahifani qayta yuklaydi — 2.5); ilova ichida har doim Link/NavLink

import { useParams, Link } from "react-router-dom";

// Route: <Route path="/products/:id" element={<ProductDetail />} />
function ProductDetail() {
  const { id } = useParams();                    // URL'dan id (string)
  const { data: product, loading } = useFetch(`/api/products/${id}`);   // 11.7

  if (loading) return <Spinner />;
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price} so'm</p>
      <Link to="/products"> Ro'yxatga qaytish</Link>
    </div>
  );
}

// Ro'yxatda — har mahsulotga dinamik havola:
function Products({ items }) {
  return (
    <ul>
      {items.map(p => (
        <li key={p.id}>
          <Link to={`/products/${p.id}`}>{p.name}</Link>   {/* /products/42 */}
        </li>
      ))}
    </ul>
  );
}

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

// Umumiy layout (Navbar + o'zgaruvchan kontent + Footer)
function Layout() {
  return (
    <div>
      <header>
        <NavLink to="/">Bosh</NavLink>
        <NavLink to="/products">Mahsulotlar</NavLink>
        <NavLink to="/profile">Profil</NavLink>
      </header>
      <main>
        <Outlet />                {/*  bola route shu yerda render bo'ladi */}
      </main>
      <footer>© 2026</footer>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>       {/* ota — umumiy qobiq */}
        <Route index element={<Home />} />         {/* / */}
        <Route path="products" element={<Products />} />     {/* /products */}
        <Route path="products/:id" element={<ProductDetail />} />  {/* /products/42 */}
        <Route path="profile" element={<Profile />} />
        <Route path="*" element={<NotFound />} />  {/* 404 */}
      </Route>
    </Routes>
  );
}
//  Navbar/Footer o'zgarmaydi (Layout'da); faqat Outlet ichi almashadi (2.7)

import { Link, useNavigate } from "react-router-dom";

function NotFound() {
  const navigate = useNavigate();
  return (
    <div className="not-found">
      <h1>404</h1>
      <p>Bunday sahifa topilmadi.</p>
      <Link to="/">Bosh sahifaga</Link>
      <button onClick={() => navigate(-1)}> Orqaga</button>   {/* navigate(-1) — orqaga */}
    </div>
  );
}
// Route: <Route path="*" element={<NotFound />} />  (eng oxirda — 2.8)

import { useNavigate, useLocation } from "react-router-dom";

function LoginForm() {
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from || "/dashboard";   // qayerga bormoqchi edi (2.11, 2.12)

  async function handleSubmit(e) {
    e.preventDefault();
    const ok = await api.login(/* ... */);
    if (ok) {
      navigate(from, { replace: true });    //  kelgan joyga (yoki dashboard), replace (orqaga login'ga qaytmasin)
    }
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}
//  replace: true — login muvaffaqiyatli bo'lgach, "orqaga" bossa login'ga emas, oldingisi (2.9)

import { useSearchParams } from "react-router-dom";

function ProductList({ allProducts }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get("category") || "all";
  const sort = searchParams.get("sort") || "name";
  const page = Number(searchParams.get("page")) || 1;

  function updateFilter(key, value) {
    setSearchParams(prev => {
      prev.set(key, value);          // mavjud query'ni saqlab, bittasini yangila
      if (key !== "page") prev.set("page", "1");   // filtr o'zgarca 1-sahifaga
      return prev;
    });
  }

  const filtered = allProducts
    .filter(p => category === "all" || p.category === category)
    .sort((a, b) => (sort === "price" ? a.price - b.price : a.name.localeCompare(b.name)));

  return (
    <div>
      <select value={category} onChange={e => updateFilter("category", e.target.value)}>
        <option value="all">Hammasi</option>
        <option value="phones">Telefonlar</option>
      </select>
      <select value={sort} onChange={e => updateFilter("sort", e.target.value)}>
        <option value="name">Nom</option>
        <option value="price">Narx</option>
      </select>
      <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>
    </div>
  );
}
//  Filtr URL'da (/products?category=phones&sort=price)  ulashib/saqlab/orqaga ishlaydi (2.10)

import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";       // 11.7

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  const location = useLocation();

  if (loading) return <Spinner />;                // auth holatini tekshirmoqda
  if (!user) {
    // kirmagan  login'ga (qayerga bormoqchi edi — saqla — 2.11)
    return <Navigate to="/login" state={{ from: location.pathname }} replace />;
  }
  return children;                                 // kirgan  sahifa
}

// Ishlatish:
function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/dashboard" element={
        <ProtectedRoute><Dashboard /></ProtectedRoute>
      } />
    </Routes>
  );
}
//  Frontend guard — UX; HAQIQIY himoya backend'da (token — 5.16, 14)

function RoleRoute({ children, allowedRoles }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (!allowedRoles.includes(user.role)) {
    return <Navigate to="/403" replace />;        // ruxsat yo'q (rol mos emas)
  }
  return children;
}

// Faqat admin:
<Route path="/admin" element={
  <RoleRoute allowedRoles={["admin"]}><AdminPanel /></RoleRoute>
} />
//  RBAC frontend (UX) + backend (haqiqiy — 5.17) birga (14-QISM)

// Barcha bola route'ni birata himoyalash (Outlet bilan)
function ProtectedLayout() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return (
    <DashboardLayout>
      <Outlet />                {/* himoyalangan bola route'lar */}
    </DashboardLayout>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route element={<ProtectedLayout />}>        {/* path'siz — faqat himoya + layout */}
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Route>
    </Routes>
  );
}
//  Bitta ProtectedLayout — dashboard/settings/profile hammasini himoyalaydi (DRY — 2.7)

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

const Home = lazy(() => import("./pages/Home"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));

function App() {
  return (
    <Suspense fallback={<PageLoader />}>    {/* sahifa yuklanishda (11.8: 2.5) */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}
//  Har sahifa alohida chunk (route-based splitting — 11.8: 2.6); routing + lazy birga

function Examples() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/products")}>Mahsulotlar</button>
      <button onClick={() => navigate(-1)}> Orqaga</button>
      <button onClick={() => navigate("/cart", { state: { fromProduct: true } })}>
        Savatga (ma'lumot bilan)
      </button>
      {/* Shartli yo'naltirish (taymer/effekt) */}
    </div>
  );
}

// Effektda yo'naltirish (masalan 5s'dan keyin):
function Success() {
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => navigate("/dashboard"), 5000);   // 5s keyin
    return () => clearTimeout(timer);            // cleanup (11.5: 2.7)
  }, [navigate]);
  return <p>5 soniyada yo'naltirilasiz...</p>;
}

import { createBrowserRouter, RouterProvider, useLoaderData } from "react-router-dom";

// Route config (data API)
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: "products/:id",
        element: <ProductDetail />,
        loader: async ({ params }) => {          //  render'dan OLDIN ma'lumot
          const res = await fetch(`/api/products/${params.id}`);
          if (!res.ok) throw new Response("Topilmadi", { status: 404 });
          return res.json();
        },
      },
    ],
  },
]);

function ProductDetail() {
  const product = useLoaderData();               // loader qaytargan (tayyor) ma'lumot
  return <h1>{product.name}</h1>;                // loading holati YO'Q (loader yuklab bo'lgan)
}

function App() {
  return <RouterProvider router={router} />;
}
//  loader — render'dan oldin ma'lumot (tezroq; loading komponentda emas — 2.13)

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

const Home = lazy(() => import("./pages/Home"));
const Products = lazy(() => import("./pages/Products"));
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Login = lazy(() => import("./pages/Login"));

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        {/* Ochiq (public) — umumiy layout */}
        <Route path="/" element={<PublicLayout />}>
          <Route index element={<Home />} />
          <Route path="products" element={<Products />} />
          <Route path="products/:id" element={<ProductDetail />} />
          <Route path="login" element={<Login />} />
        </Route>

        {/* Himoyalangan — protected layout */}
        <Route element={<ProtectedLayout />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Route>

        {/* Admin — rol bilan */}
        <Route path="/admin" element={<RoleRoute allowedRoles={["admin"]}><Admin /></RoleRoute>} />

        {/* 404 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Suspense>
  );
}
//  Public/protected/admin layout'lar + lazy + 404 — real ilova routing skeleti

import { createBrowserRouter, useRouteError, useLoaderData } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/products/:id",
    element: <ProductDetail />,
    errorElement: <RouteError />,        //  loader/render xatosi shu yerga tushadi
    loader: async ({ params }) => {
      const res = await fetch(`/api/products/${params.id}`);
      if (!res.ok) throw new Response("Topilmadi", { status: res.status });   //  errorElement
      return res.json();
    },
  },
]);

function RouteError() {
  const error = useRouteError();          // ushlangan xato yoki Response
  if (error.status === 404) return <h1>Mahsulot topilmadi</h1>;
  return <div><h1>Xatolik yuz berdi</h1><p>{error.message}</p></div>;
}
//  errorElement — route darajasidagi Error Boundary (11.6 analogi — 2.17)

import { useNavigation, Outlet } from "react-router-dom";

// Root layout — o'tishda global "yuklanmoqda" ko'rsatkichi
function RootLayout() {
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading";   // loader ma'lumot yuklamoqda
  return (
    <div>
      {isLoading && <div className="top-progress-bar" />}   {/* silliq UX (oq ekran emas) */}
      <main style={{ opacity: isLoading ? 0.6 : 1 }}>
        <Outlet />
      </main>
    </div>
  );
}
//  navigation.state: "idle" | "loading" | "submitting" — pending UI uchun (2.18)

import { ScrollRestoration, Link, useParams, useNavigate } from "react-router-dom";

// Splat: /files/*  butun ostki yo'lni ushlaydi
function FileBrowser() {
  const params = useParams();
  const path = params["*"];               // "docs/2026/hisobot.pdf"
  const navigate = useNavigate();
  return (
    <div>
      <p>Joriy yo'l: {path}</p>
      <button onClick={() => navigate("..")}> Yuqori papka</button>   {/* relative */}
      <Link to="edit">Tahrirlash</Link>    {/* relative — joriy route'ga qo'shiladi */}
    </div>
  );
}

// Root layout'da bir marta — scroll pozitsiyaci avtomatik tiklanadi
function Root() {
  return (
    <>
      <Outlet />
      <ScrollRestoration />               {/* orqaga  eski scroll; yangi  tepaga 2.19-bob */}
    </>
  );
}

 <a href="/products">  (sahifani qayta yuklaydi — SPA buziladi — 2.5)
 <Link to="/products">  (client-side — qayta yuklamaydi)

 <Route path="/x" element={Komponent} />  (havola — ishlamaydi)
 <Route path="/x" element={<Komponent />} />  (JSX — 2.4)

 const { id } = useParams(); product[id]  (id — string, raqam kutilsa xato)
 Number(id)  (kerak bo'lsa — 2.6)

 navigate("/dashboard")  (orqaga bossa login'ga qaytadi)
 navigate(from, { replace: true })  (tarixni almashtir — 2.9)

 const [filter, setFilter] = useState()  (ulashib/saqlab bo'lmaydi)
 useSearchParams (URL'da — ulashiladigan — 2.10)

 faqat frontend guard (har kim API'ga to'g'ridan kira oladi — 2.12)
 frontend (UX) + backend token tekshiruvi (haqiqiy — 5.16, 14)