Назария

Масирҳо: React Router

Саҳифаҳои бисёр дар як барнома

Барномаи воқеӣ — якчанд саҳифа аст: асосӣ, каталог, корти мол, сабад, профил. Мумкин буд «саҳифаи ҷорӣ»-ро дар ҳолат нигоҳ дошта, компоненти лозимиро тавассути if нишон диҳем. Аммо он гоҳ:

суроға дар браузер тағйир намеёбад — саҳифаро ба хатчӯбҳо илова кардан ё ба дӯст фиристодан мумкин нест;
тугмаҳои «Ба қафо» ва «Ба пеш» кор намекунанд;
баъд аз навсозии саҳифа корбар ҳамеша дар саҳифаи асосӣ мемонад.

Барномаи React — барномаи яксаҳифагӣ (SPA) аст: браузер як файли HTML-ро бор мекунад, ва минбаъд JavaScript саҳифаро худаш аз нав мекашад. Барои он ки дар ин ҳол суроғаҳо кор кунанд, масиргузорӣ лозим аст: суроға → кадом компонентро нишон додан. Китобхонаи маъмултарин барои ин — React Router.

Чӣ тавр кор мекунад: ҳангоми клик ба истинод React Router саҳифаро аз нав бор намекунад. Вай суроғаро тавассути History API-и браузер (history.pushState) иваз мекунад ва компонентҳои лозимиро аз нав мекашад. Зуд мешавад, мисли барнома, ва дар айни замон бо суроғаҳои ҳақиқӣ.

Пайваст кардан

Дар лоиҳа китобхонаро бо фармони npm install react-router-dom насб мекунанд ва чизи лозимиро импорт мекунанд:

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

Дар сайти мо вай аллакай ҳамчун объекти глобалии ReactRouterDOM пайваст аст:

const { BrowserRouter, Routes, Route, Link } = ReactRouterDOM;

Тамоми барномаро ба роутер мепечонанд — одатан дар main.jsx:

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

BrowserRouter бо суроғаи ҳақиқии браузер кор мекунад. Дар вазифаҳои сайт код дар sandbox иҷро мешавад, ки сатри суроға надорад, барои ҳамин он ҷо MemoryRouter истифода мешавад — вай суроғаро дар хотира нигоҳ медорад. Ҳамаи дигар якхела кор мекунад.

Routes ва Route

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/catalog" element={<CatalogPage />} />
      <Route path="/cart" element={<CartPage />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

<Routes> ба суроғаи ҷорӣ нигоҳ мекунад ва як масири мувофиқро интихоб мекунад.
<Route path="…" element={…}> — «агар суроға чунин бошад, ин унсурро нишон деҳ».
path="*" бо ҳар суроға мувофиқ меояд — ин саҳифаи 404 барои ҳама чизест, ки мувофиқ наомад.

Ҳама чизе, ки берун аз <Routes> истодааст (сарлавҳа, меню, поёнсаҳифа), дар ҳамаи саҳифаҳо нишон дода мешавад.

Истинодҳо: Link ва NavLink

<a href="/cart">-и оддӣ тамоми саҳифаро аз нав бор мекунад ва ҳолати барномаро тоза мекунад. Дар дохили барнома Link-ро истифода мебаранд:

<nav>
  <Link to="/">Асосӣ</Link>
  <Link to="/catalog">Каталог</Link>
  <NavLink to="/cart" className={({ isActive }) => (isActive ? "active" : "")}>
    Сабад
  </NavLink>
</nav>

Link <a>-и оддиро мекашад, вале кликро медорад. NavLink — ҳамон, плюс медонад, ки оё истинод фаъол аст: барои равшан кардани банди ҷории меню қулай аст.

Параметрҳои суроға: useParams

Кортҳои молҳо суроғаҳои намуди /products/1, /products/2… доранд. Барои ҳар мол масир навиштан намешавад. Қисми тағйирёбандаи суроғаро бо дунуқта нишон медиҳанд:

<Route path="/products/:id" element={<ProductPage />} />

const { useParams } = ReactRouterDOM;

function ProductPage() {
  const { id } = useParams();          // барои /products/42 → "42"
  const product = products.find((p) => p.id === Number(id));
  if (!product) return <p>Мол ёфт нашуд</p>;
  return <h1>{product.title}</h1>;
}

Параметрҳо ҳамеша сатрҳо мебошанд: "42", на 42. Ҳангоми муқоиса бо id-и ададӣ тавассути Number табдил диҳед. Одатан аз рӯи параметр маълумот бор мекунанд: useFetch(/api/products/${id}) аз мавзӯи гузашта.

Параметрҳоро баъд аз ? (/catalog?sort=price&page=2) тавассути хуки useSearchParams мехонанд:

const [searchParams, setSearchParams] = useSearchParams();
const sort = searchParams.get("sort");          // "price"
setSearchParams({ sort: "name" });              // суроға ?sort=name мешавад

Гузариш аз код: useNavigate

Баъзан гузаштан на бо клик ба истинод, балки баъд аз амал лозим аст: формаро фиристоданд — саҳифаи фармоишро кушодан, аз аккаунт баромаданд — ба асосӣ:

const { useNavigate } = ReactRouterDOM;

function OrderForm() {
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault();
    const order = await sendOrder();
    navigate(`/orders/${order.id}`);
  }

  return <form onSubmit={handleSubmit}>…</form>;
}

navigate("/path") — гузаштан (мисли клик ба истинод, бо сабт дар таърих);
navigate("/path", { replace: true }) — сабти ҷориро иваз кардан: «Ба қафо» ба ин ҷо барнамегардонад;
navigate(-1) — ба қафо, мисли тугмаи браузер.

Барои гузариш рост ҳангоми кашидан (масалан, «дастрасӣ нест — ба саҳифаи воридшавӣ») компоненти <Navigate to="/login" replace /> ҳаст.

Масирҳои дарунӣ ва Outlet

Аксари саҳифаҳо макети умумӣ доранд: сарлавҳа, меню, поёнсаҳифа. Онро бо масири волидӣ тасвир мекунанд, ва ҷойро барои саҳифаҳои кӯдак бо <Outlet /> нишон медиҳанд:

const { Outlet } = ReactRouterDOM;

function Layout() {
  return (
    <div>
      <header>
        <Link to="/">Мағоза</Link> <Link to="/cart">Сабад</Link>
      </header>
      <main>
        <Outlet />          {/* ин ҷо саҳифаи ҷорӣ гузошта мешавад */}
      </main>
      <footer>© 2026</footer>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<HomePage />} />
        <Route path="/cart" element={<CartPage />} />
        <Route path="/products/:id" element={<ProductPage />} />
      </Route>
      <Route path="/login" element={<LoginPage />} />   {/* бе макети умумӣ */}
    </Routes>
  );
}

Ҷойгиршавии масирҳо ҷойгиршавии интерфейсро такрор мекунад: Layout ҳангоми гузариш байни саҳифаҳои дохили худ дар ҷояш мемонад (ва ҳолати худро нигоҳ медорад).

Саҳифаҳои ҳифзшуда

Саҳифаи профил ё фармоишҳоро бе воридшавӣ нишон додан мумкин нест. Усули маъмул — санҷидан ва равона кардан:

function ProfilePage() {
  const { user } = useAuth();            // хуки худ бар контекст аз мавзӯи useContext
  if (!user) return <Navigate to="/login" replace />;
  return <h1>Салом, {user.name}</h1>;
}

Фаҳмидан муҳим аст: ин ҳифзи интерфейс аст, на маълумот. Санҷиши ҳақиқии дастрасиро ҳамеша сервер мекунад — кодро дар браузер корбар иваз карда метавонад.

Нашри SPA

Вақте барнома дар хостинг гузошта мешавад, суроғаи /products/42 барои сервер — роҳ ба файли вуҷуднадошта аст. Барои ҳамин хостингро чунин танзим мекунанд, ки барои ҳар суроға index.html дода шавад, ва минбаъд масирро React Router интихоб мекунад. Дар Netlify, Vercel ва Cloudflare Pages барои ин танзими содда ҳаст (ё он барои SPA пешфарз фаъол аст).

Хулоса

SPA: як саҳифаи HTML, гузаришҳо бе аз нав бор кардан; React Router суроғаро бо компонентҳо мепайвандад.
<BrowserRouter> дар атрофи барнома; <Routes> + <Route path element>; path="*" — 404.
<Link to> ба ҷойи <a href>; NavLink медонад, ки оё истинод фаъол аст.
/products/:id + useParams() — параметрҳои суроға (сатрҳо!); useSearchParams — баъд аз ?.
useNavigate() — гузариш аз код; <Navigate> — равона кардан ҳангоми кашидан.
Макети умумӣ — Route-и волидӣ бо <Outlet />.