Do czego służy biblioteka react-router-dom w React?

react-router-dom jest używany do tworzenia aplikacji jednostronicowych (SPA) w React, zapewniając routowanie po stronie klienta.

Do czego służy?

• Nawigacja: Umożliwia użytkownikom przechodzenie między różnymi "stronami" (komponentami) bez pełnego odświeżania strony.
• Zarządzanie URL: Synchronizuje aktualny URL na pasku adresu przeglądarki z wyświetlanym komponentem.
• Dynamczne routowanie: Pozwala definiować trasy z parametrami (np. /users/:id) do ładowania specyficznych danych.
• Nawigacja programowa: Umożliwia przekierowywanie użytkownika za pomocą kodu (np. po pomyślnym zapisaniu danych).

Główne komponenty:

• BrowserRouter: Opakowanie dla aplikacji korzystające z API History do synchronizacji URL.
• Routes: Kontener do definiowania tras.
• Route: Określa dopasowanie między URL a komponentem.
• Link: Komponent do tworzenia linków, które zapobiegają przeładowaniu strony.
• useNavigate: Hook do nawigacji programowej.
• useParams: Hook do wyciągania parametrów trasy z URL.

Przykład użycia:

// 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="/">Strona główna</Link> {' '}
        <Link to="/about">O nas</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Przykład dynamicznej trasy */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;