Uso de React Router DOM 6 en Proyectos React

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Uso de React Router DOM 6 en Proyectos React

Resumen

¿Por qué hay tantas versiones de React Router?

React Router ha existido en varias formas a lo largo de los años, lo que ha llevado a muchas versiones. No se trata solo de actualizaciones regulares de una herramienta, sino que ha habido diferentes proyectos y repositorios de React Router. Los primeros ya no se mantienen, están archivados en GitHub como parte de la historia de desarrollo. Sin embargo, React Router DOM surgió posteriormente y sigue siendo el que se usa principalmente hoy en día.

React Router DOM: Ha tenido varias versiones, siendo las más conocidas la 4, la 5 y la 6.
React Router: En algún momento, los creadores originales se separaron y uno de ellos creó una versión con mejoras en accesibilidad y usabilidad. Sin embargo, después se reunieron y actualmente utilizamos React Router DOM 6.

La estructura permanece similar entre versiones, lo que facilita la migración entre diferentes versiones o incluso otros React Routers.

¿Cuál es la estructura general de un React Router?

La estructura básica de un React Router implica varios componentes y conceptos que se repiten en sus versiones, lo cual es fundamental para comprender cómo funciona.

Provider: Funciona muy parecido a React Context. Permite comunicar propiedades, estados y actualizadores de estado entre componentes sin Prop Drilling.
Link: En lugar de etiquetas <a>, se utiliza un componente Link que proviene de la dependencia React Router.
Route: Define las rutas de la aplicación. Utilizando las propiedades path y render (o similar), se determina qué componentes deben renderizarse en cada ruta.

Además, los Routers suelen permitir la inclusión de un Menú o Footer que se renderice en todas las vistas, asegurando una composición constante en la estructura de la aplicación.

¿Cómo se integran los React Routers en las aplicaciones?

La práctica de integrar un React Router puede variar ligeramente, sin embargo, los conceptos básicos son los mismos al usar el enfoque de Create React App.

Instalación: Primero se debe instalar la versión deseada del React Router, en este curso se usa React Router DOM 6.
Configuración: Se configura el Provider y se definen las rutas a través de los componentes específicos como Route y Link.
Tipos de Routers: Cada React Router suele tener diferentes tipos de routers:
- Para Server Side Rendering.
- Para Single Page Applications con Client Side Rendering.

Es esencial elegir el tipo adecuado según las necesidades del proyecto, lo que permite manejar adecuadamente la navegación y el renderizado de la aplicación. En el siguiente paso se aprenderá cómo instalar React Router DOM 6 en un proyecto de Create React App y las diferencias entre los tipos de routers. Esto proporcionará una base sólida para manejar la API y los componentes en proyectos React.

Juan Diego Mejia Maestre

Estudiante

•

🛣️ React Router: Evolución, Arquitectura y Versión Actual (v6+)

📜 1. ¿Por Qué Tantas Versiones de React Router?

La existencia de múltiples versiones de React Router (RR) se debe a su evolución arquitectónica y la necesidad de adaptarse a las mejores prácticas de React (como los Hooks).

Consolidación: Hoy, el proyecto se ha consolidado en react-router-dom, la dependencia que combina la lógica central de routing con las herramientas específicas para navegadores.
Versión Transformadora: La v6 es la versión actual que se centra en la optimización de rendimiento y una sintaxis simplificada.

Cambios Clave en v6:

Adiós a <Switch>: Reemplazado por el componente <Routes> (el contenedor obligatorio).
Rutas Jerárquicas: Definición simple y declarativa de rutas anidadas.
Navegación Moderna: Se usa el hook useNavigate (en lugar de useHistory) para la navegación programática.
Data APIs: La versión 6 introdujo Loaders y Actions para manejar la obtención y mutación de datos antes del renderizado, mejorando el rendimiento.

🧱 2. Estructura y Conceptos Fundamentales (API v6)

Los siguientes conceptos son la base de la implementación de RR en React:

Provider (Router): <BrowserRouter>. Debe envolver toda tu aplicación y provee el contexto de navegación.
<Routes>: Contenedor que solo renderiza la primera <Route> que coincide con la URL.
<Route>: Define la regla de la ruta (usa path y element).
<Link>: El componente esencial para navegar internamente sin recargar la página.
<Outlet />: Se usa dentro de un componente padre (Layout) para indicar dónde deben renderizarse las rutas anidadas (subrutas).

💻 3. Ejemplo de Código Completo con React Router DOM v6

Este ejemplo ilustra la configuración básica, la navegación con <Link>, rutas anidadas con <Outlet />, y la captura de parámetros con useParams().

// App.js
import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet,
  useParams,
  useNavigate
} from 'react-router-dom';

// --- VISTAS SIMPLES ---
const Home = () => <h2>🏡 Inicio</h2>;
const About = () => <h2>ℹ️ Acerca de</h2>;

// --- LAYOUT PADRE (Ruta /usuarios) ---
const UsuariosLayout = () => {
  return (
    <>
      <h3>👥 Gestión de Usuarios</h3>
      <nav>
        <Link to="crear" style={{ marginRight: '10px' }}>Crear</Link>
        <Link to="lista">Lista</Link>
      </nav>
      <hr />
      {/* ⚠️ Outlet: Aquí se renderizará el contenido de las subrutas (lista, crear, detalle) */}
      <Outlet />
    </>
  );
};

// --- SUBRUTAS Y HOOKS ---
const CrearUsuario = () => <h4>➕ Formulario para crear un nuevo usuario</h4>;

const ListaUsuarios = () => {
  const navigate = useNavigate(); // Hook para navegación programática
  const handleVerDetalle = (id) => navigate(`/usuarios/${id}`);

  return (
    <>
      <h4>📜 Lista de Usuarios</h4>
      <ul>
        <li onClick={() => handleVerDetalle(1)} style={{ cursor: 'pointer' }}>Usuario ID: 1</li>
        <li onClick={() => handleVerDetalle(2)} style={{ cursor: 'pointer' }}>Usuario ID: 2</li>
      </ul>
    </>
  );
};

const DetalleUsuario = () => {
  const { userId } = useParams(); // Hook para capturar el parámetro de la URL
  return <h4>👤 Detalle del Usuario con ID: **{userId}**</h4>;
};

// --- COMPONENTE PRINCIPAL ---
function App() {
  return (
    // 1. EL PROVIDER
    <BrowserRouter>
      <h1>Configuración con React Router DOM v6</h1>

      {/* Barra de navegación visible en todas las rutas */}
      <nav style={{ paddingBottom: '20px' }}>
        <Link to="/" style={{ marginRight: '15px' }}>Inicio</Link>
        <Link to="/acerca" style={{ marginRight: '15px' }}>Acerca de</Link>
        <Link to="/usuarios" style={{ marginRight: '15px' }}>Usuarios</Link>
        <hr />
      </nav>

      {/* 2. EL CONTENEDOR DE RUTAS */}
      <Routes>
        {/* Rutas Simples */}
        <Route path="/" element={<Home />} />
        <Route path="/acerca" element={<About />} />

        {/* 3. RUTA PADRE PARA EL LAYOUT ANIDADO */}
        <Route path="/usuarios" element={<UsuariosLayout />}>

          {/* Subrutas: Se renderizan DENTRO del <Outlet /> de UsuariosLayout */}
          <Route path="lista" element={<ListaUsuarios />} />
          <Route path="crear" element={<CrearUsuario />} />
          <Route path=":userId" element={<DetalleUsuario />} /> {/* Ruta Dinámica */}

          {/* Ruta por defecto (se activa si la URL es /usuarios exactamente) */}
          <Route index element={<h3>Selecciona una opción de usuario</h3>} />
        </Route>

        {/* RUTA WILDCARD (404) - Siempre al final */}
        <Route path="*" element={<h2>🚫 404: Página no encontrada</h2>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Uso de React Router DOM 6 en Proyectos React

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una