La biblioteca react-router-dom pentru ce este folosită în React?

react-router-dom este utilizat pentru construirea aplicațiilor de tip single-page (SPA) în React, oferind rutare pe partea clientului.

La ce folosește?

• Navigare: Permite utilizatorilor să navigheze între diferite "pagini" (componente) fără reîncărcarea completă a paginii.
• Gestionarea URL-urilor: Sincronizează URL-ul curent din bara de adrese a browserului cu componenta afișată.
• Routing dinamic: Permite definirea rutelor cu parametri (de exemplu, /users/:id) pentru a încărca date specifice.
• Navigare programatică: Permite redirecționarea utilizatorului prin cod (de exemplu, după salvarea cu succes a datelor).

Componente principale:

• BrowserRouter: Înveliș pentru aplicație care folosește API-ul History pentru sincronizarea URL-ului.
• Routes: Container pentru definirea rutelor.
• Route: Definește corespondența între URL și componentă.
• Link: Component pentru crearea de link-uri care evită reîncărcarea paginii.
• useNavigate: Hook pentru navigare programatică.
• useParams: Hook pentru extragerea parametrilor de rută din URL.

Exemplu de utilizare:

// 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="/">Pagina principală</Link> {' '}
        <Link to="/about">Despre noi</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Exemplu de rută dinamică */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;