React Router haqida
React Router - React'da bir sahifadan boshqa sahifaga o'tishda ishlatilinadigan kutubxona hisoblanadi. Ya'ni React o'zida routing'ni qo'llab quvvatlamaydi. Buni amalga oshirish uchun React Router kutubxonasini o'rnatish kerak bo'ladi.
Buni o'rnatish uchun quyidagi komanda ishlatilinadi:
Routingni qo'shish qadamlari:
1. React Routerni o'rnatib olish
2. Dasturimizdagi Router'larni aniqlab olish. Kerakli bo'lgan Route nomlari va shu route ga tegishli bo'lgan komponentlar aniqlab chiqiladi.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}
Route'ning path va element kabi attribyutlari bo'ladi.
3. Endi esa sahifalardan bir-biriga o'tish uchun navigatsiya yasashimiz kerak. Biz har bir komponent ichida (App dan tashqari) quyidagicha navigatsiya yaratsak bo'ladi.
<nav>
<a style={{marginRight: '5px'}} href="/">Home</a>
<a style={{marginRight: '5px'}} href="/contact">Contact</a>
<a href="/about">About</a>
</nav>
Lekin bu kodni dublikat qilish hisoblanadi. Eng yaxshi yo'li bu Layout yaratish hisoblanadi.
function RootLayout() {
return (
<nav>
<a style={{marginRight: '5px'}} href="/">Home</a>
<a style={{marginRight: '5px'}} href="/contact">Contact</a>
<a href="/about">About</a>
</nav>
)
}
Endi yuqoridagi Layout ni har bir komponentimizga navbar o'rniga qo'yib chiqsak bo'ladi. Lekin bu ham ming komponent yaratganimiz bilan yana kod dublikatsiyasiga olib keladi.
Buni to'griroq yo'li Route larni yana bir Route ga o'rash hisoblanadi.
Faylni saqlab browserni ochsak faqat linklar ko'rinadi. Kontent esa ko'rinmaydi.
Kontentlarni ham ko'rinishi uchun biz <Outlet/> komponentini Layout ichida navigatsiyadan keyin import qilamiz.
Shunda so'ng hammasi to'grilanadi, faqat e'tibor bersak har sahifaga o'tayotganimizda sahifa yangilanayapti. Odatda React 'single page application' hisoblanadi. Qayta yuklanishni oldini olish uchun router kutubxonasidan Link ni import qilamiz va Layout ga o'tib navigatsiya ichidagi <a> tegi bilan almashtiramiz.
import { Link, Outlet } from "react-router-dom";
function RootLayout() {
return (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/contact">Contact</Link>
<Link to="/about">About</Link>
</nav>
<Outlet/>
</div>
);
}
React Router Dom kutubxonasidan foydalanish
- Terminalda npm i react-router-dom buyrug'ini beramiz
- App.jsx faylimizda quyidagilarni kutubxonadan import qilamiz
import {BrowserRouter, Routes, Route} from 'react-router-dom'