React-də react-router-dom kitabxanası nə üçün istifadə olunur?

react-router-dom React-də tək səhifə tətbiqləri (SPA) qurmaq üçün istifadə olunur və müştəri tərəfli marşrutlaşdırmanı təmin edir.

Nəyə lazımdır?

• Naviqasiya: İstifadəçilərə səhifənin tam yenilənmədən müxtəlif "səhifələr" (komponentlər) arasında keçid etməyə imkan verir.
• URL idarəetməsi: Brauzerin ünvan çubuğundakı cari URL ilə göstərilən komponent arasında sinxronizasiya edir.
• Dinamik marşrutlaşdırma: Parametrlərlə (məsələn, /users/:id) marşrutların təyin olunmasına və xüsusi məlumatların yüklənməsinə imkan verir.
• Proqramlı naviqasiya: Kodu istifadə edərək istifadəçini yönləndirməyə imkan verir (məsələn, məlumatların uğurla saxlanmasından sonra).

Əsas komponentlər:

• BrowserRouter: URL-ni sinxronlaşdırmaq üçün History API istifadə edən tətbiq üçün qapqacaq.
• Routes: marşrutların təyin olunması üçün konteyner.
• Route: URL və komponent arasında uyğunluğu müəyyən edir.
• Link: səhifənin yenidən yüklənməsini qarşısını alan linklər yaratmaq üçün komponent.
• useNavigate: proqramlı naviqasiya üçün hook.
• useParams: URL-dən marşrut parametrlərini çıxarmaq üçün hook.

İstifadə nümunəsi:

// 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="/">Əsas səhifə</Link> {' '}
        <Link to="/about">Haqqımızda</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Dinamik marşrut nümunəsi */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;