Mit használ a react-router-dom könyvtár React-ben?

A react-router-dom a React-ben egylapos alkalmazások (SPA-k) építésére szolgál, és kliensoldali útvonalkezelést biztosít.

Mire jó?

• Navigáció: Lehetővé teszi a felhasználók számára, hogy különböző "oldalak" (komponensek) között lépjenek anélkül, hogy az oldal teljesen újratöltődne.
• URL-kezelés: Szinkronizálja az aktuális URL-t a böngésző címsorában a megjelenített komponenssel.
• Dinamikus útvonalak: Lehetővé teszi útvonalak paraméterekkel való meghatározását (pl. /users/:id), hogy specifikus adatokat töltsön be.
• Programozott navigáció: Kód segítségével irányíthatja a felhasználót (pl. sikeres adatmentés után).

Fő komponensek:

• BrowserRouter: A csomagoló az alkalmazás számára, amely az API History-t használja az URL szinkronizálására.
• Routes: Az útvonalak meghatározására szolgáló konténer.
• Route: Meghatározza az URL és a komponens közötti megfeleltetést.
• Link: Olyan komponens, amely linkeket hoz létre, megakadályozva az oldal újratöltését.
• useNavigate: Hook a programozott navigációhoz.
• useParams: Hook az URL-ből származó útvonal paraméterek kinyeréséhez.

Használati példa:

// 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="/">Főoldal</Link> {' '}
        <Link to="/about">Rólunk</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Dinamikus útvonal példa */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;