Sahifalar bilan ishlash — react-router-dom

DarslarWeb dasturlash

Sahifalar bilan ishlash — react-router-dom

Bir sahifalik (SPA) ilovada sahifalar yaratish, URL boshqaruvi, link'lar va dinamik yo'llar.

60 daqiqa
React — Dars 7

Ko'p sahifali React

React SPA bo'lsa ham sahifa-sahifa navigatsiya bo'lishi mumkin. react-router-dom shu ishni qiladi.

RoutesRouteLinkuseParams

Dars rejasi

6 ta mavzu
  1. 01SPA nima va nega router kerak?
  2. 02O'rnatish va sozlash
  3. 03Routes va Route
  4. 04Link va NavLink
  5. 05Dinamik URL — :id
  6. 06useNavigate va 404

1. SPA nima va nega router kerak?

React ilova — Single Page Application (SPA). Server bitta HTML yuboradi, qolgan hammasini React chizadi. Lekin foydalanuvchi uchun /home, /about, /profile kabi «sahifalar» bo'lishi kerak — shu maqsadda router ishlatiladi.

Klassik sayt

Har sahifa — server'dan yangi HTML. Tez-tez yangilanish, sekin.

SPA + Router

Brauzer yangilanmaydi. URL o'zgaradi, React mos komponentni chizadi. Juda tez.

2. O'rnatish va sozlash

1npm install react-router-dom
src/main.jsx — BrowserRouter bilan o'rash
1import { BrowserRouter } from "react-router-dom";
2import React from "react";
3import ReactDOM from "react-dom/client";
4import App from "./App";
5

6ReactDOM.createRoot(document.getElementById("root")).render(
7  <BrowserRouter>
8    <App />
9  </BrowserRouter>
10);

3. Routes va Route

src/App.jsx
1import { Routes, Route } from "react-router-dom";
2import Home from "./pages/Home";
3import About from "./pages/About";
4import Contact from "./pages/Contact";
5

6function App() {
7  return (
8    <div>
9      <nav>{/* navigatsiya keyinroq */}</nav>
10

11      <Routes>
12        <Route path="/" element={<Home />} />
13        <Route path="/about" element={<About />} />
14        <Route path="/contact" element={<Contact />} />
15      </Routes>
16    </div>
17  );
18}
19

20export default App;
src/pages/Home.jsx
1function Home() {
2  return (
3    <div>
4      <h1>Bosh sahifa</h1>
5      <p>Xush kelibsiz!</p>
6    </div>
7  );
8}
9export default Home;

4. Link va NavLink

Sahifalar orasida <a> emas, <Link> ishlatiladi — u brauzerni yangilamasdan URL'ni o'zgartiradi.

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

3function Navbar() {
4  return (
5    <nav>
6      {/* Link — oddiy havola */}
7      <Link to="/">Bosh</Link>
8      <Link to="/about">Biz haqimizda</Link>
9      <Link to="/contact">Aloqa</Link>
10

11      {/* NavLink — faol sahifani ajratib ko'rsatadi */}
12      <NavLink
13        to="/about"
14        className={({ isActive }) => isActive ? "faol" : ""}
15      >
16        Biz haqimizda
17      </NavLink>
18    </nav>
19  );
20}

5. Dinamik URL — :id

App.jsx — dinamik route
1<Routes>
2  <Route path="/products" element={<Products />} />
3  <Route path="/products/:id" element={<ProductDetail />} />
4  <Route path="/users/:userId/posts/:postId" element={<Post />} />
5</Routes>
useParams — URL'dan qiymat olish
1import { useParams } from "react-router-dom";
2

3function ProductDetail() {
4  const { id } = useParams();
5  // URL: /products/42 → id = "42"
6

7  return (
8    <div>
9      <h1>Mahsulot #{id}</h1>
10      <p>Bu — {id} raqamli mahsulot</p>
11    </div>
12  );
13}
Ro'yxatdan batafsil sahifaga
1function Products() {
2  const mahsulotlar = [
3    { id: 1, nom: "Telefon" },
4    { id: 2, nom: "Noutbuk" },
5    { id: 3, nom: "Naushnik" },
6  ];
7

8  return (
9    <ul>
10      {mahsulotlar.map(m => (
11        <li key={m.id}>
12          <Link to={`/products/${m.id}`}>
13            {m.nom}
14          </Link>
15        </li>
16      ))}
17    </ul>
18  );
19}

6. useNavigate va 404

Dasturiy ravishda navigatsiya
1import { useNavigate } from "react-router-dom";
2

3function LoginForm() {
4  const navigate = useNavigate();
5

6  const handleSubmit = (e) => {
7    e.preventDefault();
8    // ...login logikasi
9    navigate("/dashboard");     // muvaffaqiyatli kirdi
10    // navigate(-1)              // bir qadam orqaga
11    // navigate("/", { replace: true })  // tarixga yozmasdan
12  };
13

14  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
15}
404 sahifasi — * (star route)
1function NotFound() {
2  return (
3    <div>
4      <h1>404 — Sahifa topilmadi</h1>
5      <Link to="/">Bosh sahifaga qaytish</Link>
6    </div>
7  );
8}
9

10// App.jsx'da — eng oxirida
11<Routes>
12  <Route path="/" element={<Home />} />
13  <Route path="/about" element={<About />} />
14  <Route path="*" element={<NotFound />} />   {/* qolgan hamma URL */}
15</Routes>
Router simulyatsiya
Natijajonli

Kichik test

0 / 5

1.Qayerda BrowserRouter bilan App'ni o'rash kerak?

2.Sahifalar orasida yurish uchun qaysi tag?

3.URL'dan id olish uchun hook?

4.Dasturiy ravishda boshqa sahifaga o'tish?

5.404 sahifa uchun path?

Mustaqil ish

0 / 5