cover

Primer vistazo a React Router v7

author photo

Héctorbliss

@hectorbliss


Mira el video si prefieres:

robot logo saying hello

No te quedes atrás: Actualízate

Suscríbete para recibir información sobre nuevos frameworks, updates, eventos, tips, hacks y más.

Vamos a comenzar un proyecto nuevo para echarle un primer vistazo a la nueva versión de React Router (RR7).

Esta nueva versión pone a nuestra disposición todos los poderes del Server Rendering que hacen tan popular a Remix, como:

  • La separación del código (code splitting)
  • La carga de datos en el servidor (data loading)
  • Las acciones (actions)
  • El renderizado desde el servidor (server-rendering)
  • El pre renderizado estático (static pre-rendering)
  • Los estados de carga (pending states)
  • Y las interfaces optimistas (optimistic UI)

entre otras varias. Vamos pues a iniciar un proyecto nuevo para mirar de cerca todo esto.

Iniciando un proyecto con RR7

Cómo siempre, el equipo de RR y Remix, ponen a nuestra disposición un template que podemos analizar a profundidad si no queremos hacer el paso a paso que estoy a punto de hacer yo y solo se quiere leer código para entender su distribución. Estos templates se pueden usar con la bilbioteca degit que hace copias de los repositorios sin descargar todo el historial de los commits, lo que lo hace más rápido que un git clone. 🤯

npx degit remix-run/react-router/templates/basic#dev my-app

1. Pero nosotros lo haremos de forma manual para entender mejor todas las piezas que hacen falta

Así que primero vamos a crear una nueva carpeta para trabajar y luego instalar todas las herramientas que nos harán falta. Llamaremos a nuestra carpeta: rr7-app

mkdir rr7-app cd rr7-app npm init -y npm install react react-dom react-router@pre @react-router/node@pre @react-router/serve@pre npm install -D vite @react-router/dev@pre

Observa que indicamos la versión pre que apunta al pre-release.

2. Vamos a crear todos los archivos necesarios

dentro de nuestro proyecto rr7-app vamos a crear algunos archivos más para configurar nuestras rutas y a Vite.

mkdir app touch app/root.tsx touch app/home.tsx touch app/routes.ts touch vite.config.js

¡Muy bien! Tenemos nuestro archivo root.tsx y nuestra primer ruta home. También el archivo de configuración de Vite y de paso un archivo routes.tsx para definir más rutas. En un momento veremos las opciones que tenemos en este nuevo archivo. 🧐 Antes vamos a escribir algo de código en estos archivos.

Primero vite.config.js

import { reactRouter } from "@react-router/dev/vite"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [reactRouter()], });

Aquí solo tenemos que agregar nuestro plugin reactRouter. ✅

Ahora el package.json

Cuando ejecutamos el comando npm init -y, se nos creó un archivo package.json al que ahora queremos decirle que su tipo es module y de paso ponemos nuestros script para levantar el servidor de desarrollo.

{ "type": "module", "scripts": { "dev": "react-router dev" } }

En el código de ejemplo solo está lo que debes agregar, deja intacto lo que el archivo ya contenga. 😉

Ahora creamos nuestro componente home

import React from "react"; export default function Home() { return <h2>Fixtergeek - Blissmo</h2>; }

Esto es solo un componente que se exporta por default.

Ahora escribamos root.tsx

import { Outlet, Scripts, ScrollRestoration, } from "react-router"; export function Layout() { return ( <html lang="en"> <body> <Outlet /> <ScrollRestoration /> <Scripts /> </body> </html> ); } export function HydrateFallback() { return <div>Cargando...</div>; } export default function Root() { return <h1>Hola, RR7!</h1>; } export function ErrorBoundary() { return <h1>Todo valió baby</h1>; }

Observa que declaramos tres funciones que nos ayudarán a administrar mejor los estados de hidratación (carga) y los errores. Además de devolver por default el componente padre (Root). 😎

Finalmente el misterioso archivo de rutas

Para que nuestro proyecto funcione, ahora tenemos que definir nuestras rutas en un archivo routes.ts.

import { index } from "@react-router/dev/routes"; export const routes = [index("./home.tsx")];

observa el uso del método index.

Probando el proyecto

¡Uff! Hemos escrito mucho código. Pero, ahora sabemos perfectamente en qué consiste la estructura de nuestro proyecto y hasta cuál es el script que debemos correr para probarlo. Hagámoslo pues.

npm run dev

¡Yei, tenemos un proyecto RR7 corriendo! 🥳🎉🛸

Opciones en las rutas

En este pre-release, el ruteo por default está definido por el archivo routes.ts. y debemos agregar cada una de nuestras rutas de forma manual. Incluso el equipo de RR7 pone a nuestra disposición herramientas para poder agrupar y anidar rutas o compartir layouts, lo que hace increíblemente sencillo y versátil trabajar con las rutas.

Sin embargo, si tu ya probaste Remix o vienes de otro framework SSR, seguro ya disfrutas de la comodidad de usar la convención de rutas basadas en archivos. Por eso para terminar, vamos a cambiarnos a la convención de rutas basadas en archivos (file system routing convention) para usar la carpeta routes/ y poner ahí todas nuestras rutas como ya lo hacemos en Remix. 💿 😎

👀 Si no has visto mi último video, donde te explico cómo funcionan las flat-routes, aquí te dejo el link.

Para ello vamos a instalar un paquete más.

npm i @react-router/fs-routes --force

Con este paquete instalado, ahora vamos a cambiar nuestro archivo routes.ts.

import { type RouteConfig } from "@react-router/dev/routes"; import { flatRoutes } from "@react-router/fs-routes"; export const routes: RouteConfig = flatRoutes();

Observa que importamos flatRoutes y de paso el tipo para asignarle directamente lo que esta función devuelve a la constante routes. ¡Ya está! Ahora vamos a mover nuestra página home a la carpeta routes/ que vamos a crear.

mkdir app/routes mv app/home.tsx app/routes/_index.tsx

Hemos creado la carpeta para nuestras rutas y movido nuestra página home con un nuevo nombre. Este nombre es la convención para nuestra ruta home con este método de ruteo. Solo resta probar de nuevo.

npm run dev

¡Woooo! ¡Bienvenido a React Router v7 con flat-routes! 🤯

Necesitamos Elephant de Tame Impala de fondo musical para festejar. 😎

Abrazo. Bliss. 🤓

Enlaces relacionados

¿Qué son las flat-routes?

Docs oficiales

File Route Conventions

course banner

¿Quieres mantenerte al día sobre los próximos cursos y eventos?

Suscríbete a nuestro newsletter

Jamás te enviaremos spam, nunca compartiremos tus datos y puedes cancelar tu suscripción en cualquier momento 😉

robot logo saying hello
facebook icontwitter iconlinkedin iconinstagram iconyoutube icon

© 2016 - 2023 Fixtergeek