DEV Community

Carlos m. Ruiz
Carlos m. Ruiz

Posted on

React Router v6: entender el flujo moderno de rutas

#javascript #architecture #tutorial #react

React Router cambió bastante a partir de la versión 6.4.
Más allá de nuevas APIs, el cambio importante es cómo se definen y ejecutan las rutas.

En este post explico qué es cada pieza (RouteObject, createBrowserRouter, RouterProvider) y cómo fluye todo hasta renderizar la UI, sin atajos ni confusión.

1. De JSX a configuración

Antes, las rutas se definían directamente en JSX:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

Este enfoque funciona, pero mezcla definición de rutas, jerarquía y renderizado.
React Router moderno separa estas responsabilidades.

2. RouteObject: describiendo una ruta

Un RouteObject es un objeto que describe el comportamiento de una ruta.

No es un componente.
No renderiza UI.
No controla navegación.

{
  path: "/login",
  element: <Login />
}
Enter fullscreen mode Exit fullscreen mode

Aquí solo se define:

  • qué URL existe
  • qué componente corresponde a esa URL

3. Qué puede definir un RouteObject

Un RouteObject puede describir múltiples aspectos de una ruta:

  • path: la ruta
  • index: ruta por defecto dentro de un layout
  • element: componente a renderizar
  • children: subrutas
  • loader: carga de datos previa
  • action: manejo de formularios
  • errorElement: UI de error

Todo sigue siendo configuración declarativa.

4. RouteObject[]: el sistema de rutas completo

Las aplicaciones reales tienen múltiples rutas.
Por eso se trabaja con arreglos de RouteObject.

const routes: RouteObject[] = [
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: "about", element: <About /> }
    ]
  }
];
Enter fullscreen mode Exit fullscreen mode

Este arreglo define jerarquía, layouts y navegación.
Hasta este punto, React Router todavía no está ejecutándose.

5. createBrowserRouter: activando la configuración

Aquí entra createBrowserRouter.

const router = createBrowserRouter(routes);
Enter fullscreen mode Exit fullscreen mode

Esta función:

  • recibe un RouteObject[]
  • crea un Router
  • conecta rutas, historial, loaders y actions

Es el punto donde la configuración se convierte en lógica.

6. El Router: el motor interno

El Router:

  • escucha cambios de URL
  • determina la ruta activa
  • ejecuta loaders y actions
  • coordina errores y navegación

Normalmente no se usa directamente.

7. RouterProvider: conectando el router con React

Para que React pueda usar el router, se utiliza RouterProvider.

<RouterProvider router={router} />
Enter fullscreen mode Exit fullscreen mode

Este componente:

  • expone el router vía contexto
  • renderiza el element correcto
  • habilita hooks como useNavigate y useLoaderData

8. El flujo completo de React Router moderno

Viendo todo junto, el flujo real es este:

Diagrama del flujo de React Router moderno desde RouteObject hasta UI

En esta imagen se puede ver cómo React Router transforma una definición estática de rutas en una interfaz interactiva:

  • Los RouteObject describen el comportamiento de cada ruta
  • El arreglo RouteObject[] representa el sistema completo
  • createBrowserRouter activa la configuración
  • El Router coordina navegación, datos y errores
  • RouterProvider conecta todo con React y renderiza la UI

9. Idea clave para recordar

React Router moderno separa qué rutas existen, cómo se ejecutan y cómo se renderizan.

Si entiendes este flujo, React Router deja de sentirse complejo

Top comments (0)