ReactDərs 13 / 15

Client routing

URL görünüşü seçir

SPA daxilində keçid zamanı eyni tətbiq fərqli görünüş göstərir. Client router brauzer tarixçəsi və URL ilə komponentləri əlaqələndirir. Aşağıdakı nümunə React Router-in müasir deklarativ rejimi üçün react-router paketindən istifadə edir; təlim layihəsində paketi quraşdır.

import { BrowserRouter, Routes, Route, Link, useParams, useSearchParams } from 'react-router';
function Product() {
  const { id } = useParams();
  return <h1>Məhsul: {id}</h1>;
}
function Search() {
  const [params] = useSearchParams();
  return <p>Axtarış: {params.get('q') || 'verilməyib'}</p>;
}
export default function App() {
  return <BrowserRouter>
    <nav><Link to="/">Ana səhifə</Link> <Link to="/products/1">Məhsul</Link></nav>
    <Routes>
      <Route path="/" element={<Search />} />
      <Route path="/products/:id" element={<Product />} />
      <Route path="*" element={<h1>Səhifə tapılmadı</h1>} />
    </Routes>
  </BrowserRouter>;
}

Nümunə

Yol, query və yayımlama

/products/1 yolunda :id dinamik hissədir; /?q=çanta query saxlayır. Link tətbiqdaxili naviqasiyanı router ilə əlaqələndirir. Tam sənəd keçidi və xarici link üçün adi a elementi uyğundur. İç-içə marşrutlarda valideyn görünüşünün övlad hissəsi üçün Outlet istifadə oluna bilər.

Səhifəni birbaşa /products/1 ünvanında yeniləyəndə server həmin yolu da tətbiqin girişinə yönləndirməlidir. Bu SPA hostinq fallback-ıdır; hər fayl sorğusunu yanlış HTML cavabına çevirmə. Nümunə ayrıca React təlim layihəsidir; bu saytın Astro marşrutlarını dəyişdirmək tələb olunmur.

Əlavə qeydlər və mənbələr

SPA daxilində URL dəyişəndə görünən komponent seçilir. Marşrut yolu, parametr və query parametrini ayır; tətbiqdaxili keçidlər, brauzerin geri düyməsi və birbaşa URL açılışını birlikdə yoxla.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

SPA və client routing
Route, Link və yol parametrləri
Query və birbaşa URL açılışı

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

URL-dən görünüşə keç

Tətbiqdaxili linklə detal səhifəsinə keç və naməlum yolu yoxla.

Prosesi son vəziyyətə çatdır.

Ana səhifə
Naməlum yol
Məhsul detalı

Ana səhifə

URL kök marşrutdur.

/ → <Home />

Bu məşq prosesi modelləşdirir.

Özün sına

Ana səhifə, məhsul siyahısı və ID üzrə detal marşrutu qur. Naməlum yol üçün səhifə göstər, Geri düyməsini və detal URL-ni yeniləməyi yoxla.

Nəticəni necə yoxlayım?

Ana, detal və tapılmayan marşrut işləyir; URL parametri və query ayrılır, Geri və yeniləmə yoxlanılır.

Gözlənilən nəticə

/products/1 → Kitab; /products/999 → Məhsul tapılmadı; naməlum yol → Səhifə tapılmadı.
Brauzerin Geri düyməsi əvvəlki marşrutu göstərir. Yayımlamada detal URL-ni yeniləmək üçün host SPA fallback ilə index.html təqdim etməlidir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Nümunə React Router-in deklarativ API-sindən istifadə edir. Naməlum məhsul və naməlum yol ayrı yoxlanılır.

App.jsx

import { BrowserRouter, Link, Route, Routes, useParams } from 'react-router';
const products = [{ id: '1', title: 'Kitab' }, { id: '2', title: 'Çanta' }];
function Detail() {
  const { id } = useParams();
  const product = products.find(item => item.id === id);
  return product ? <h1>{product.title}</h1> : <p>Məhsul tapılmadı.</p>;
}
function Products() { return <ul>{products.map(product => <li key={product.id}><Link to={`/products/${product.id}`}>{product.title}</Link></li>)}</ul>; }
export default function App() {
  return <BrowserRouter><nav><Link to="/">Ana səhifə</Link> <Link to="/products">Məhsullar</Link></nav>
    <Routes><Route path="/" element={<h1>Xoş gəldin</h1>} /><Route path="/products" element={<Products />} /><Route path="/products/:id" element={<Detail />} /><Route path="*" element={<p>Səhifə tapılmadı.</p>} /></Routes>
  </BrowserRouter>;
}

qurasdirma.txt

Mövcud React təlim layihəsində: npm install react-router
Bu App artıq BrowserRouter yaradır; onu ikinci Router ilə bükmə.

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.