v1.0.0

¡Absolutamente! React Router DOM es una biblioteca fundamental para manejar el enrutamiento en aplicaciones React de una sola página (SPA). Aquí tienes un “cheatsheet” completo y bien estructurado, optimizado para ser claro y conciso para una IA conversacional.

🛣️ React Router DOM Cheatsheet Completo 🛣️

React Router DOM es la biblioteca estándar de facto para el enrutamiento declarativo en aplicaciones React. Permite a los usuarios navegar entre diferentes “vistas” de la aplicación sin recargar la página completa, manteniendo la URL sincronizada con la interfaz de usuario.

1. 🌟 Conceptos Clave

Enrutamiento del lado del cliente (Client-Side Routing): En una SPA, el navegador no realiza una solicitud al servidor cada vez que cambia la URL. React Router intercepta estos cambios y renderiza los componentes de React apropiados.
Rutas declarativas: Defines tus rutas como componentes de React, lo que las hace fáciles de leer y mantener.
Historia del navegador (History API): React Router utiliza la API de la historia del navegador para manipular la URL sin una recarga de página completa.
Componentes Router: El componente principal que envuelve tu aplicación para habilitar el enrutamiento. (BrowserRouter es el más común).
Rutas anidadas (Nested Routes): Permite que las rutas padres definan un “layout” y que las rutas hijas se rendericen dentro de ese layout.

2. Configuración Inicial

Instalación:

npm install react-router-dom
# o
yarn add react-router-dom

Configuración del Router Principal:

Envuelve tu aplicación o la parte de tu aplicación que necesita enrutamiento con BrowserRouter.
Esto suele hacerse en src/main.jsx (React 18) o src/index.js (React 17 y anteriores).

// src/main.jsx (o src/index.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

import { BrowserRouter } from 'react-router-dom'; // Importa BrowserRouter

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter> {/* Envuelve tu App con BrowserRouter */}
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);

3. 🧩 Componentes Principales para Definir Rutas

3.1. `Routes`

Reemplaza al antiguo Switch en React Router v6+.
Solo renderiza la primera Route que coincide con la URL actual.

Es obligatorio que todas tus Routes estén dentro de un componente Routes.

// src/App.jsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound'; // Componente 404

function App() {
  return (
    <Routes> {/* Todas tus rutas deben ir aquí dentro */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="*" element={<NotFound />} /> {/* Ruta 404: Captura cualquier ruta no coincidente */}
    </Routes>
  );
}

export default App;

3.2. `Route`

Define una ruta individual.
Props clave:
- path: La ruta URL a la que este componente debe renderizarse (ej. /, /users, /users/:id).
  - * (asterisco): Para rutas “catch-all” (404 Not Found).
- element: El elemento React a renderizar cuando la ruta coincide.

4. 🔗 Navegación

4.1. `Link`

El componente preferido para la navegación declarativa entre rutas en tu aplicación.
Renderiza un tag <a> HTML, pero React Router intercepta el click para evitar una recarga de página.

Prop clave:

to: La ruta a la que se debe navegar. Puede ser un string o un objeto.

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link> |{' '}
      <Link to="/about">About</Link> |{' '}
      <Link to="/contact">Contact</Link> |{' '}
      <Link to="/users/123">User 123</Link>
    </nav>
  );
}

4.2. `NavLink`

Similar a Link, pero añade automáticamente una clase active al elemento HTML cuando la URL actual coincide con la ruta de NavLink. Útil para estilos de navegación activa.

Props adicionales:

className: Función para aplicar clases condicionalmente (recibe { isActive }).
style: Función para aplicar estilos condicionalmente (recibe { isActive }).

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) =&gt; (isActive ? 'active-link' : undefined)}
        style={({ isActive }) =&gt; ({ color: isActive ? 'red' : 'blue' })}
      >
        Home
      </NavLink>
      {/* ... otros NavLink */}
    </nav>
  );
}

5. 🎣 Hooks Comunes (React Router v6+)

5.1. `useParams()`

Devuelve un objeto de pares clave/valor de los parámetros dinámicos de la URL.

Útil para acceder a IDs u otros valores de la ruta (ej. /users/:id).

import { useParams } from 'react-router-dom';

function UserPro() {
  const { userId } = useParams(); // Si la ruta es '/users/:userId'
  return <h2>Perfil del Usuario: {userId}</h2>;
}

5.2. `useNavigate()`

Devuelve una función que te permite navegar programáticamente.

Reemplaza a useHistory de versiones anteriores.

import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();

  const handleLogin = () =&gt; {
    // Lógica de autenticación
    // Después de un login exitoso:
    navigate('/dashboard'); // Navega a /dashboard
    // navigate(-1); // Navega una página hacia atrás
    // navigate('/', { replace: true }); // Reemplaza la entrada actual en el historial
    // navigate('/items', { state: { fromLogin: true } }); // Pasa estado a la siguiente ruta
  };

  return <button onClick={handleLogin}>Login</button>;
}

5.3. `useLocation()`

Devuelve el objeto location que representa la URL actual.
Contiene pathname, search (query string), hash, y state.

state: Es un valor que puedes pasar a la ubicación desde Link o useNavigate.

import { useLocation } from 'react-router-dom';

function CurrentPathInfo() {
  const location = useLocation();
  console.log(location.pathname);  // Ej: /productos/123
  console.log(location.search);    // Ej: ?sort=asc&page=1
  console.log(location.hash);      // Ej: #section-top
  console.log(location.state);     // Datos pasados programáticamente

  return <p>Estás en: {location.pathname}</p>;
}

5.4. `useSearchParams()`

Hook para trabajar fácilmente con los parámetros de la cadena de consulta (query parameters) en la URL (ej. ?search=react&page=1).

Devuelve un array [searchParams, setSearchParams].

import { useSearchParams } from 'react-router-dom';

function ProductSearch() {
  const [searchParams, setSearchParams] = useSearchParams();
  const searchTerm = searchParams.get('query') || '';

  const handleSearchChange = (event) =&gt; {
    setSearchParams({ query: event.target.value }); // Actualiza la URL a ?query=...
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleSearchChange}
        placeholder="Buscar productos..."
      />
      <p>Buscando: {searchTerm}</p>
    </div>
  );
}

5.5. `Outlet` (para Rutas Anidadas)

Renderiza el componente hijo de la ruta anidada.

Debe usarse dentro del element de una ruta padre que tiene rutas anidadas.

// pages/DashboardLayout.jsx
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard/pro">Perfil</Link> |{' '}
        <Link to="/dashboard/settings">Configuración</Link>
      </nav>
      <hr />
      <Outlet /> {/* Aquí se renderizarán los componentes de las rutas anidadas */}
    </div>
  );
}
export default DashboardLayout;

// src/App.jsx (en las Rutas)
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<DashboardLayout />}> {/* Ruta padre */}
    <Route index element={<h2>Bienvenido al Dashboard</h2>} /> {/* Ruta índice (por defecto en /dashboard) */}
    <Route path="pro" element={<h3>Mi Perfil</h3>} /> {/* Ruta anidada: /dashboard/pro */}
    <Route path="settings" element={<h3>Configuración</h3>} /> {/* Ruta anidada: /dashboard/settings */}
  </Route>
  <Route path="*" element={<NotFound />} />
</Routes>

5.6. `useMatch()`

Devuelve un objeto de coincidencia si la URL actual coincide con el path dado. Útil para saber si una ruta específica está activa.

import { useMatch } from 'react-router-dom';

function MyNavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <li style={{ fontWeight: match ? 'bold' : 'normal' }}>
      <Link to={to}>{children}</Link>
    </li>
  );
}

6. 🛣️ Patrones de Enrutamiento Comunes

Rutas básicas: path="/", path="/about".
Rutas con parámetros: path="/users/:userId".
Rutas anidadas: Como se muestra con Outlet. El path de la ruta hija es relativo al path de la ruta padre.
Ruta índice (Index Route): Una ruta anidada sin un path que se renderiza cuando la ruta padre es activa y no hay rutas hijas coincidentes (ej. en /dashboard, se renderiza la ruta index).
- <Route index element={<WelcomeDashboard />} />
Rutas 404 (Not Found): Una ruta con path="*". Siempre debe ser la última en el Routes para que actúe como “catch-all”.
Layout Routes: Una ruta padre que renderiza un LayoutComponent y dentro de este, un Outlet para renderizar las rutas hijas.

7. ⏱️ Carga perezosa (Lazy Loading) y Suspense

Para dividir el código de tu aplicación y cargar componentes solo cuando son necesarios.

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const LazyDashboard = lazy(() =&gt; import('./pages/Dashboard'));
const LazyAdminPanel = lazy(() =&gt; import('./pages/AdminPanel'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}> {/* Muestra un fallback mientras el componente se carga */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<LazyDashboard />} />
        <Route path="/admin" element={<LazyAdminPanel />} />
        {/* ... */}
      </Routes>
    </Suspense>
  );
}

8. Rutas Protegidas (Ejemplo Básico)

Puedes crear un componente envoltorio para proteger rutas que requieren autenticación.

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated, children }) =&gt; {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />; // Redirige a login si no está autenticado
  }
  return children ? children : <Outlet />; // Renderiza hijos o Outlet para rutas anidadas
};

// Uso en App.jsx
// Suponiendo que 'isAuthenticated' viene de tu contexto de autenticación
<Route path="/dashboard" element={<ProtectedRoute isAuthenticated={true} />}>
  <Route index element={<h2>Bienvenido, usuario autenticado!</h2>} />
  {/* ... otras rutas anidadas del dashboard */}
</Route>
<Route path="/login" element={<LoginPage />} />

9. Buenas Prácticas y Consejos

Mantén tus rutas limpias: Evita lógica compleja directamente en la definición de la ruta. Mueve la lógica a los componentes que renderizan.
Usa Link y NavLink para navegación interna: Nunca uses tags <a> simples para navegación interna en una SPA, ya que causarían una recarga completa de la página.
Maneja rutas 404: Siempre incluye una ruta con path="*" como última opción para manejar URLs no coincidentes.
Aprovecha las rutas anidadas: Son excelentes para organizar layouts complejos y la estructura de tu aplicación.
Carga perezosa para el rendimiento: Utiliza React.lazy y Suspense para cargar componentes solo cuando son necesarios, mejorando los tiempos de carga inicial.
Utiliza useSearchParams para filtros/paginación: Es la forma más limpia de gestionar el estado de la URL que no forma parte de la jerarquía de rutas.

Este cheatsheet te proporciona una base sólida para trabajar con React Router DOM, cubriendo los componentes y hooks esenciales para construir una aplicación de enrutamiento robusta en React.

 Descarga completada

🛣️ React Router DOM Cheatsheet Completo 🛣️

1. 🌟 Conceptos Clave

2. Configuración Inicial

3. 🧩 Componentes Principales para Definir Rutas

3.1. Routes

3.2. Route

4. 🔗 Navegación

4.1. Link

4.2. NavLink