Logo de JSCamp

Cómo crear rutas con React Router

Introducción

En este módulo comenzamos a trabajar con React Router, la librería estándar para manejar rutas en aplicaciones React. Vamos a migrar nuestro router casero hacia una solución profesional y robusta.

Hasta este punto, habíamos creado un router propio usando componentes caseros, pero aunque funcional, tiene limitaciones importantes:

  • No es un estándar de la industria.
  • No incluye todas las funcionalidades que necesitaremos en producción.
  • Está menos optimizado.
  • Reinventamos la rueda en lugar de usar una solución probada.

React Router es el estándar de facto para enrutado en React y nos ofrece:

  • Navegación declarativa entre páginas.
  • Gestión automática del historial del navegador.
  • Hooks especializados para parámetros, localización y navegación programática.
  • Manejo robusto de errores y rutas no encontradas.
  • Soporte para múltiples modos de enrutado.

Instalación de React Router

Antes de comenzar, necesitamos instalar la librería. En la terminal, ejecutamos:

npm install react-router

Paso 1: Envolver la aplicación con <BrowserRouter>

El primer paso es envolver toda nuestra aplicación con el componente BrowserRouter. Este componente proporciona el contexto de enrutado necesario para que React Router funcione en toda la aplicación.

Vamos al archivo main.jsx y modificamos el código:

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

Importación necesaria

No olvides importar BrowserRouter al inicio del archivo:

import { BrowserRouter } from 'react-router-dom'

Otros tipos de Router: Además de BrowserRouter, React Router ofrece otros modos de enrutado:HashRouter que utiliza el hash (#) en la URL para manejar las rutas (ej: example.com/#/about). Útil cuando no puedes configurar el servidor para manejar rutas del lado del servidor, o para aplicaciones que se sirven desde el sistema de archivos local. Y MemoryRouter que mantiene el historial de navegación en memoria sin modificar la URL del navegador. Es especialmente útil para testing, entornos sin navegador (como React Native), o cuando quieres control total sobre el historial sin interacción con la URL.

Paso 2: Crear las rutas con <Routes> y <Route>

Ahora vamos a App.jsx para definir nuestras rutas de forma declarativa.

Primero, importamos los componentes necesarios:

import { Routes, Route } from 'react-router-dom'

Luego, definimos nuestras rutas:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/search" element={<SearchPage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>

Anatomía de una ruta

Cada <Route> tiene dos props fundamentales:

  • path: El patrón de URL que debe coincidir.
  • element: El componente React que se renderizará cuando la ruta coincida.

Es importante notar que React Router usa element (que recibe JSX) en lugar de component (que recibiría solo la referencia al componente). Esto nos da más flexibilidad para pasar props directamente.

Cómo funciona el matching de rutas

React Router evalúa las rutas de arriba hacia abajo dentro del componente <Routes>. Cuando encuentra una coincidencia, renderiza ese componente y deja de buscar.

El proceso de matching

  1. El usuario navega a una URL, por ejemplo /search
  2. React Router compara esa URL con el path de cada <Route> en orden
  3. Cuando encuentra una coincidencia exacta, renderiza el element asociado
  4. Las rutas posteriores no se evalúan

Ejemplo práctico

Con nuestras rutas actuales:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/search" element={<SearchPage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>
  • Si navegas a / → se renderiza HomePage
  • Si navegas a /search → se renderiza SearchPage
  • Si navegas a /about o cualquier otra ruta → se renderiza NotFoundPage

El comodín * como página 404

El path='*' es un comodín especial que coincide con cualquier ruta que no haya sido capturada por las rutas anteriores.

Por eso siempre debe ir al final de tu lista de rutas. Si lo pusieras al principio:

<Routes>
  <Route path="*" element={<NotFoundPage />} /> {/* ❌ Mal */}
  <Route path="/" element={<HomePage />} />
  <Route path="/search" element={<SearchPage />} />
</Routes>

Todas las URLs mostrarían NotFoundPage, porque * coincidiría primero con cualquier ruta.

El orden importa: coloca siempre las rutas específicas primero y el comodín * al final.

Probando las rutas

Una vez configurado todo, podemos probar la navegación:

  • Navegar a / muestra la HomePage
  • Navegar a /search muestra la SearchPage
  • Navegar a cualquier ruta inexistente (como /about, /productos, etc.) muestra la NotFoundPage

Lo mejor de todo es que la navegación ocurre sin recargar la página completa. React Router intercepta los cambios de URL y actualiza solo el componente necesario, manteniendo el estado de la aplicación intacto.

Errores comunes al configurar rutas

Olvidar envolver con <BrowserRouter>

Si no envuelves tu aplicación con <BrowserRouter> en main.jsx, obtendrás un error indicando que los componentes de React Router deben estar dentro de un Router.

Solución: Asegúrate de que <BrowserRouter> envuelve tu <App /> en el punto de entrada.

Usar component en lugar de element

En versiones antiguas de React Router se usaba component, pero ahora se usa element:

{
  /* ❌ Incorrecto */
}
;<Route path="/" component={HomePage} />

{
  /* ✅ Correcto */
}
;<Route path="/" element={<HomePage />} />

Olvidar el comodín para el 404

Si no incluyes una ruta con path='*', las URLs no encontradas simplemente no renderizarán nada, dejando la página en blanco.

Solución: Siempre incluye una ruta comodín al final para manejar casos no esperados.

Paths incorrectos

Los paths deben comenzar con / para rutas absolutas:

{
  /* ❌ Incorrecto */
}
;<Route path="search" element={<SearchPage />} />

{
  /* ✅ Correcto */
}
;<Route path="/search" element={<SearchPage />} />

Resumen

En esta clase hemos aprendido:

  • Instalar React Router con npm install react-router
  • Envolver la aplicación con <BrowserRouter> para habilitar el enrutado
  • Definir rutas de forma declarativa usando <Routes> y <Route>
  • Cómo funciona el matching: React Router evalúa rutas de arriba hacia abajo hasta encontrar una coincidencia
  • El comodín * para crear una página 404 que capture todas las rutas no definidas
  • La importancia del orden: las rutas específicas primero, el comodín al final
  • Errores comunes y cómo evitarlos

Con esta base sólida, estamos listos para explorar funcionalidades más avanzadas como rutas dinámicas, navegación programática, parámetros de URL y mucho más.