¿Para qué se utiliza la biblioteca react-router-dom en React?

react-router-dom se utiliza para construir aplicaciones de una sola página (SPA) en React, proporcionando enrutamiento del lado del cliente.

¿Para qué sirve?

• Navegación: Permite a los usuarios navegar entre diferentes "páginas" (componentes) sin recargar completamente la página.
• Gestión de URL: Sincroniza la URL actual en la barra de direcciones del navegador con el componente que se muestra.
• Enrutamiento dinámico: Permite definir rutas con parámetros (por ejemplo, /users/:id) para cargar datos específicos.
• Navegación programática: Permite redirigir al usuario mediante código (por ejemplo, después de guardar datos con éxito).

Componentes principales:

• BrowserRouter: Envoltorio para la aplicación que usa la API History para sincronizar la URL.
• Routes: Contenedor para definir las rutas.
• Route: Define la correspondencia entre la URL y el componente.
• Link: Componente para crear enlaces que evitan la recarga de la página.
• useNavigate: Hook para navegación programática.
• useParams: Hook para extraer parámetros de la ruta desde la URL.

Ejemplo de uso:

// 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="/">Inicio</Link> {' '}
        <Link to="/about">Acerca de</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Ejemplo de ruta dinámica */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;