DEV Community

Cover image for React Router Data Mode: Parte 1 – Instalación y primeras rutas
Kevin Julián Martínez Escobar
Kevin Julián Martínez Escobar

Posted on • Edited on

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

#remix #webdev #react #programming

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:

  1. Instalación y primeras rutas
  2. Rutas anidadas y Outlet
  3. Loaders
  4. Rutas con parámetros, useRouteLoaderData y useParams
  5. useParams, Navlink
  6. Actions
  7. Validación de formularios y uso de fetcher
  8. Paginación bien hecha
  9. 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.

web de contactos para la demo de react router

¡Vamos a empezar!

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
Enter fullscreen mode Exit fullscreen mode

Instalamos las dependencias:

npm i
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Verás en pantalla algo muy simple: un <h1> 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
Enter fullscreen mode Exit fullscreen mode

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>Home</div>,
  },
  {
    path: "/about",
    element: <div>About</div>,
  },
  {
    path: "*",
    element: <div>Not Found</div>,
  },
]);

export default AppRoutes;
Enter fullscreen mode Exit fullscreen mode

A diferencia del modo Declarativo (donde usamos <Routes> y <Route>), 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>,
);
Enter fullscreen mode Exit fullscreen mode

¡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.

Top comments (0)