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:
entre otras varias. Vamos pues a iniciar un proyecto nuevo para mirar de cerca todo esto.
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
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
.
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.
import { reactRouter } from "@react-router/dev/vite"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [reactRouter()], });
Aquí solo tenemos que agregar nuestro plugin reactRouter
. ✅
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. 😉
import React from "react"; export default function Home() { return <h2>Fixtergeek - Blissmo</h2>; }
Esto es solo un componente que se exporta por default.
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). 😎
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
.
¡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! 🥳🎉🛸
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. 🤓
© 2016 - 2023 Fixtergeek