Reactda react-router-dom kutubxonasi nima uchun ishlatiladi?

react-router-dom Reactda bir sahifali ilovalar (SPA) qurish uchun ishlatiladi va mijoz tomonidagi marshrutlashni ta'minlaydi.

Nima uchun kerak?

• Navigatsiya: Foydalanuvchilarga sahifa to'liq yangilanishsiz turli "sahifalar" (komponentlar) o'rtasida o'tishga imkon beradi.
• URL boshqaruvi: Brauzer adres satridagi joriy URL bilan ko'rsatilayotgan komponentni sinxronlashtiradi.
• Dinamik marshrutlash: Parametrlar bilan marshrutlarni (masalan, /users/:id) belgilash va maxsus ma'lumotlarni yuklash imkonini beradi.
• Dasturlash orqali navigatsiya: Kod yordamida foydalanuvchini yo'naltirishga imkon beradi (masalan, ma'lumotlarni muvaffaqiyatli saqlagandan so'ng).

Asosiy komponentlar:

• BrowserRouter: URLni sinxronlashtirish uchun History API ishlatadigan ilova uchun qopqoq.
• Routes: marshrutlarni belgilash uchun konteyner.
• Route: URL va komponent o'rtasidagi moslikni belgilaydi.
• Link: sahifa yangilanishini oldini oladigan havolalar yaratish uchun komponent.
• useNavigate: dasturlash orqali navigatsiya qilish uchun hook.
• useParams: URL dan marshrut parametrlarini olish uchun hook.

Foydalanish misoli:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Bosh sahifa</Link> {' '}
        <Link to="/about">Biz haqimizda</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Dinamik marshrut misoli */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;