React Router Data Mode: Parte 1 – Instalación y primeras rutas

Hace poco hablé de por qué React Router es una de las mejores herramientas que tenemos hoy en día en el ecosistema de React. En ese artículo mencioné los 3 modos que ofrece, siendo el más conocido el modo Declarativo. Sin embargo, en esta serie nos vamos a centrar en el modo Data, que sin duda es mi favorito para crear SPAs bien estructuradas y mantenibles. Esta serie tendrá varias partes, que puedes ver a continuación: Instalación y primeras rutas Rutas anidadas y Outlet Loaders y Actions Validación de formularios y uso de fetcher Paginación bien hecha Testing Todas las partes estarán explicadas en este repositorio, que ya viene preparado con algunos componentes y librerías de estilos como shadcn/ui y Tailwind. ¿Qué vamos a construir? Una aplicación de contactos en la que pondremos en práctica rutas anidadas, carga y mutación de datos, navegación, validaciones, etc. ¡Vamos a empezar! Parte 1: Instalación y primeras rutas Lo primero es clonar el repositorio base. En tu terminal: git clone git@github.com:kevinccbsg/react-router-tutorial-devto.git # movemos al tag inicial git checkout 00-init-project Instalamos las dependencias: npm i Este proyecto está creado con Vite y tiene integrada la librería de shadcn/ui. Esa parte no la explicaremos aquí, pero si quieres un tutorial de Vite + shadcn, déjamelo en los comentarios. Ahora arrancamos el proyecto: npm run dev Verás en pantalla algo muy simple: un con el texto "Welcome to React!". Vamos a cambiar eso y comenzar a usar React Router (modo Data). Instalar React Router Ejecutamos: npm i react-router Creamos un archivo nuevo llamado src/AppRoutes.tsx, que contendrá nuestra configuración de rutas: import { createBrowserRouter } from "react-router"; const AppRoutes = createBrowserRouter([ { path: "/", element: Home, }, { path: "/about", element: About, }, { path: "", element: Not Found, }, ]); export default AppRoutes; A diferencia del modo Declarativo (donde usamos y ), en el modo Data definimos las rutas como objetos. Cada objeto representa una ruta y puede incluir elementos como element, loader, action, etc. En este ejemplo: / muestra un simple "Home" /about muestra "About" captura cualquier ruta no definida (lo que React Router llama un "splat") y muestra "Not Found" Conectar el router con React Para que React Router se active, debemos conectarlo en el main.tsx. Editamos el archivo así: import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import { RouterProvider } from "react-router"; import router from './AppRoutes'; createRoot(document.getElementById('root')!).render( , ); ¡Listo! Si visitas /, /about o cualquier otra ruta, deberías ver el contenido correspondiente. ¿Qué sigue? En la siguiente parte vamos a construir la estructura real de la aplicación, ver cómo se usan los Outlet para anidar rutas, los Link y crear un layout base. Nos vemos en la parte 2 (Próximamente).

May 26, 2025 - 22:50

React Router Data Mode: Parte 1 – Instalación y primeras rutas

Hace poco hablé de por qué React Router es una de las mejores herramientas que tenemos hoy en día en el ecosistema de React. En ese artículo mencioné los 3 modos que ofrece, siendo el más conocido el modo Declarativo.

Sin embargo, en esta serie nos vamos a centrar en el modo Data, que sin duda es mi favorito para crear SPAs bien estructuradas y mantenibles.

Esta serie tendrá varias partes, que puedes ver a continuación:

Instalación y primeras rutas
Rutas anidadas y Outlet
Loaders y Actions
Validación de formularios y uso de fetcher
Paginación bien hecha
Testing

Todas las partes estarán explicadas en este repositorio, que ya viene preparado con algunos componentes y librerías de estilos como shadcn/ui y Tailwind.

¿Qué vamos a construir?

Una aplicación de contactos en la que pondremos en práctica rutas anidadas, carga y mutación de datos, navegación, validaciones, etc.

¡Vamos a empezar!

Parte 1: Instalación y primeras rutas

Lo primero es clonar el repositorio base.

En tu terminal:

git clone git@github.com:kevinccbsg/react-router-tutorial-devto.git
# movemos al tag inicial
git checkout 00-init-project

Instalamos las dependencias:

npm i

Este proyecto está creado con Vite y tiene integrada la librería de shadcn/ui. Esa parte no la explicaremos aquí, pero si quieres un tutorial de Vite + shadcn, déjamelo en los comentarios.

Ahora arrancamos el proyecto:

npm run dev

Verás en pantalla algo muy simple: un

con el texto "Welcome to React!". Vamos a cambiar eso y comenzar a usar React Router (modo Data).

Instalar React Router

Ejecutamos:

npm i react-router

Creamos un archivo nuevo llamado src/AppRoutes.tsx, que contendrá nuestra configuración de rutas:

import { createBrowserRouter } from "react-router";

const AppRoutes = createBrowserRouter([
  {
    path: "/",
    element: <div>Homediv>,
  },
  {
    path: "/about",
    element: <div>Aboutdiv>,
  },
  {
    path: "*",
    element: <div>Not Founddiv>,
  },
]);

export default AppRoutes;

A diferencia del modo Declarativo (donde usamos y ), en el modo Data definimos las rutas como objetos. Cada objeto representa una ruta y puede incluir elementos como element, loader, action, etc.

En este ejemplo:

/ muestra un simple "Home"
/about muestra "About"
* captura cualquier ruta no definida (lo que React Router llama un "splat") y muestra "Not Found"

Conectar el router con React

Para que React Router se active, debemos conectarlo en el main.tsx. Editamos el archivo así:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider } from "react-router";
import router from './AppRoutes';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  StrictMode>,
);

¡Listo! Si visitas /, /about o cualquier otra ruta, deberías ver el contenido correspondiente.

¿Qué sigue?

En la siguiente parte vamos a construir la estructura real de la aplicación, ver cómo se usan los Outlet para anidar rutas, los Link y crear un layout base.

Nos vemos en la parte 2 (Próximamente).