A cosa serve la libreria react-router-dom in React?

react-router-dom viene utilizzato per costruire applicazioni a pagina singola (SPA) in React, fornendo il routing lato client.

A cosa serve?

• Navigazione: Permette agli utenti di passare tra diverse "pagine" (componenti) senza ricaricare completamente la pagina.
• Gestione URL: Sincronizza l'URL corrente nella barra degli indirizzi del browser con il componente visualizzato.
• Routing dinamico: Consente di definire rotte con parametri (ad esempio, /users/:id) per caricare dati specifici.
• Navigazione programmata: Permette di reindirizzare l'utente tramite codice (ad esempio, dopo aver salvato con successo i dati).

Componenti principali:

• BrowserRouter: Contenitore per l'applicazione che utilizza l'API History per sincronizzare l'URL.
• Routes: Contenitore per definire le rotte.
• Route: Definisce la corrispondenza tra URL e componente.
• Link: Componente per creare link che evitano il ricaricamento della pagina.
• useNavigate: Hook per la navigazione programmata.
• useParams: Hook per estrarre i parametri della rotta dall'URL.

Esempio di utilizzo:

// 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="/">Home</Link> {' '}
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Esempio di rotta dinamica */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;