Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

React Router

ULASHISH

React Router nima?

React Router - bu React ilovalari uchun marshrutlash imkoniyatlarini ta’minlovchi kutubxona.

Marshrutlash turli ko‘rinishlar orasidagi navigatsiyani boshqarishni anglatadi.

React Router - bu React ilovalari uchun standart marshrutlash kutubxonasi. U sizga quyidagilarga imkon beradi:

  • Bir sahifali ilovangizda bir nechta sahifa yarating
  • URL parametrlari va so‘rov stringlarini boshqaring
  • Brauzer tarixi va navigatsiyani boshqaring
  • Ichki marshrutlar va tartiblarni yarating
  • Autentifikatsiya uchun himoyalangan marshrutlarni amalga oshiring

Router bo‘lmasa, sizning React ilovangiz turli xil ko‘rinishlar o‘rtasida harakatlanish imkoni bo‘lmagan bitta sahifa bilan chegaralanadi.

React Routerni o‘rnating

Buyruqlar qatorida loyiha katalogingizga o‘ting va paketni o‘rnatish uchun quyidagi buyruqni bajaring:

npm install react-router-dom

Ilovangizni BrowserRouter bilan o‘rab oling

Marshrutlashni yoqish uchun ilovangiz BrowserRouter componenti bilan o‘ralgan bo‘lishi kerak:

function App() {
  return (
    <BrowserRouter>
      {/* Your app content */}
    </BrowserRouter>
  );
}

Ko‘rishlar yaratish

Marshrutni ko‘rsatish uchun ilovamizda uchta sahifa (yoki ko‘rinish) yaratamiz: Uy, Haqida va Kontakt:

Oddiylik uchun biz uchta ko‘rinishni bitta faylda yaratamiz, lekin siz ularni alohida fayllarga bo‘lishingiz mumkin.

Misol

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

Asosiy marshrutlash

React Router asosiy marshrutlash uchun uchta asosiy componentdan foydalanadi:

  • Link : URL manzilini yangilaydigan navigatsiya havolalarini yaratadi
  • Routes : Barcha marshrut ta’riflaringiz uchun konteyner
  • Route: URL yo‘li va komponent o‘rtasidagi moslikni belgilaydi

Har bir havola uchun navigatsiya havolalari va marshrutlarni qo‘shamiz:

Misol

E’tibor bering, biz "react-router-dom" dan BrowserRouter, Routes, Route, Link-ni import qilishimiz kerak.

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Misolni ishga tushirish »

Ushbu misolda:

  • BrowserRouter ilovangizni o‘rab oladi va marshrutlash funksiyasini yoqadi
  • Link components create navigation links
  • Routes va Route marshrutlash konfiguratsiyangizni belgilaydi

O‘rnatilgan marshrutlar

Boshqa Route ichida Route bo‘lishi mumkin, bu ichki yo‘nalishlar deb ataladi.

O‘rnatilgan marshrutlar yangi URL manziliga o‘tganingizda sahifaning qismlarini o‘zgartirishga imkon beradi, boshqa qismlar esa o‘zgartirilmaydi yoki qayta yuklanmaydi, xuddi sahifa ichida sahifa bo‘lishi kabi.

Keling, yuqoridagi misoldan foydalanamiz va Products componentida ko‘rsatiladigan ikkita yangi componentni qo‘shamiz.

Biri CarProducts va biri BikeProducts deb ataladi:

Misol

Shuni ham yodda tutingki, biz Outlet componentini "react-router-dom" dan import qilishimiz kerak.

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

function Home() {
  return <h1>Home Page</h1>;
}

function Products() {
  return (
    <div>
      <h1>Products Page</h1>
      <nav style={{ marginBottom: '20px' }}>
        <Link to="/products/car">Cars</Link> |{" "}
        <Link to="/products/bike">Bikes</Link>
      </nav> 
      <Outlet /> 
    </div>
  );
}

function CarProducts() {
  return (
    <div>
      <h2>Cars</h2>
      <ul>
        <li>Audi</li>
        <li>BMW</li>
        <li>Volvo</li>
      </ul>
    </div>
  );
}

function BikeProducts() {
  return (
    <div>
      <h2>Bikes</h2>
      <ul>
        <li>Yamaha</li>
        <li>Suzuki</li>
        <li>Honda</li>
      </ul>
    </div>
  );
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/products">Products</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />}>
          <Route path="car" element={<CarProducts />} />
          <Route path="bike" element={<BikeProducts />} />
        </Route>
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Misolni ishga tushirish »

Yuqoridagi misol haqida muhim eslatmalar:

  1. Outlet:
    The <Outlet /> element in the Products component specifies where to render the child route’s content.

  2. Routes:
    The Routes element contains the routes to CarProducts and BikeProducts as child routes of the Products parent route.

  3. URL Structure:
    The URL structure is relative to the parent route’s path. For example:
    • '/products/car' ga o‘tganingizda, CarProducts componenti ko‘rsatiladi.
    • '/products/bike' ga o‘tganingizda, BikeProducts componenti ko‘rsatiladi.

Stil faol havolalar

Bog‘lanish componentining Nav Link deb nomlangan maxsus versiyasi mavjud bo‘lib, u havolaning URL manzili "faol" yoki yo‘qligini biladi.

NavLink ayniqsa quyidagilar uchun foydalidir:

  • Navigatsiya menyulari
  • Non bo‘laklari
  • Yorliqlar

Joriy URL uning to propiga mos kelsa, NavLink faol hisoblanadi.

NavLink componenti faol havolalarni uslublashni osonlashtiradi.

Yuqoridagi asosiy misolni oling va NavLink yordamida faol havolalar uchun uslublarni qo‘shing:

Misol

navLinkStyles nomli yangi element yarating va App da <Link> ni <NavLink> bilan almashtiring.

Shuni ham yodda tutingki, biz NavLink componentini "react-router-dom" dan import qilishimiz kerak.

import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';

// Style function for active links
const navLinkStyles = ({ isActive }) => ({
  color: isActive ? '#007bff' : '#333',
  textDecoration: isActive ? 'none' : 'underline',
  fontWeight: isActive ? 'bold' : 'normal',
  padding: '5px 10px'
});

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation with NavLink for active styling */}
      <nav style={{ marginBottom: '20px' }}>
        <NavLink to="/" style={navLinkStyles}>Home</NavLink> |{" "}
        <NavLink to="/about" style={navLinkStyles}>About</NavLink> |{" "}
        <NavLink to="/contact" style={navLinkStyles}>Contact</NavLink>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Misolni ishga tushirish »

URL parametrlari

URL parametrlari marshrut yo‘llariga qo‘shishingiz mumkin bo‘lgan o‘zgaruvchilardir. Ular ko‘pincha componentlar o‘rtasida ma’lumotlarni uzatish uchun ishlatiladi.

http://localhost:5173/customer/Tobias yo‘lida URL parametri Tobias.

URL parametrlari URLning bir qismi o‘zgarishi mumkin bo‘lgan dinamik marshrutlarni yaratish imkonini beradi. Ularni URL manzilingizdagi o‘zgaruvchilar sifatida tasavvur qiling.

React Router componentlaringizdagi ushbu parametrlarga kirish uchun useParams hookini taqdim etadi.

Turli mijozlarga salom aytishi mumkin bo‘lgan tabrik sahifasi bilan oddiy misol:

Misol

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

function Info() {
  const { firstname } = useParams();
  return <h1>Hello, {firstname}!</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/customer/Emil">Emil</Link> | 
        <Link to="/customer/Tobias">Tobias</Link> |
        <Link to="/customer/Linus">Linus</Link>
      </nav>

      <Routes>
        <Route path="/customer/:firstname" element={<Info />} />
      </Routes>
    </BrowserRouter>
  );
}

Misolni ishga tushirish »

Ushbu misolda:

  • Marshrut yo‘lidagi :firstname URL parametri
  • Agar /customer/Emil manziliga kirsangiz, "Hello, Emil" matnini ko‘rasiz
  • Agar /customer/Tobias manziliga kirsangiz, "Hello, Tobias" matnini ko‘rasiz
  • Agar /customer/Linus manziliga kirsangiz, "Hello, Linus" matnini ko‘rasiz
  • Siz URL manzilida istalgan nomdan foydalanishingiz mumkin va salomlashuv ishlaydi!, buni sinab ko‘ring http://localhost:5173/customer/John
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish