Cómo diseñar el mapa de rutas con React Router

Antes de instalar cualquier librería de navegación en React, primero necesitas un mapa de rutas claro que defina qué pantallas tendrá tu aplicación y cómo se conectan. Esta guía es útil para desarrolladores frontend que construyen aplicaciones multipágina con React Router y quieren planear su arquitectura antes de escribir código.

React no incluye manejo de rutas de forma nativa, por eso necesitas una librería externa. Aquí usamos React Router, pero el paso previo es más importante de lo que parece: diseñar la navegación del producto antes de crear rutas al azar.

Por qué planear las rutas antes de instalar React Router

En una app real no deberías improvisar rutas. Primero tienes que entender qué pantallas vas a tener, qué información muestra cada una y cómo se conectan entre sí [00:12]. Ese ejercicio se convierte en un mapa de rutas que funciona como guía durante todo el proyecto y ayuda a que la aplicación crezca con sentido.

El caso práctico aquí es Platzi Host, un clon educativo tipo Airbnb. La única ruta existente hasta el momento se mantiene como el home principal, que tendrá un héroe, un buscador destacado y propiedades recomendadas [00:53].

¿Qué es un mapa de rutas en una app React? Es un documento que lista todas las pantallas de tu aplicación, la información que muestra cada una y cómo se conectan. Sirve como guía de arquitectura antes de escribir el código de navegación.

Cuáles son los tipos de rutas en una app multipágina

El mapa de Platzi Host organiza las pantallas en tres categorías, y entenderlas te ayuda a decidir cómo estructurar cualquier proyecto.

• Rutas estáticas: como home, search, favoritos, perfil y login. No cambian según un identificador [02:03].
• Rutas dinámicas: las que requieren un identificador y cambian según la propiedad o el booking que estés buscando [02:11].
• Ruta comodín: el asterisco que toma protagonismo cuando ninguna ruta hace match [01:39].

Cada ruta tiene una responsabilidad específica. La página de search muestra los resultados de búsqueda y recibe filtros a través de query params [01:06]. La de propiedades no se navega directamente: usa un identificador que representa el detalle de una propiedad específica, y ese ID cambia según la propiedad que quieras visitar [01:12].

Para qué sirve la ruta comodín y el error 404

El comodín, representado con un asterisco, entra en acción cuando un usuario intenta navegar a una ruta que no coincide con ninguna de las definidas [01:39]. En ese caso, la aplicación muestra el error configurado.

Por defecto, Platzi Host marca un error 404, y su componente solo renderiza ese mensaje cuando la ruta no existe [01:50]. Es una convención simple pero necesaria para que la app no se rompa ante direcciones inválidas.

¿Qué pasa si un usuario entra a una ruta que no existe en React Router? La ruta comodín (asterisco) toma protagonismo y muestra un componente de error, normalmente un 404, evitando que la aplicación falle.

Cómo validar tu arquitectura de rutas con inteligencia artificial

Una práctica interesante aquí es apoyarse en IA para revisar el plan antes de programar. En el ejemplo se usa Devin desde la terminal, con un prompt preparado que pide evaluar la arquitectura sin escribir código todavía [03:15].

El prompt dice: estoy construyendo un clon educativo de Airbnb con React, ayúdame a revisar este mapa de rutas y si están bien separadas para una app multipágina, no escribas código todavía, solo evalúa la arquitectura. Para señalar el archivo se usa arroba más la ubicación docs/routes.md [03:35].

La respuesta de Devin confirmó que el mapa está bien separado para una app multipágina educativa, con cada ruta representando una pantalla de responsabilidad específica [03:55]. Estos fueron los puntos que validó como correctos:

• El home separado de search, para no mezclar responsabilidades entre la página principal y la de resultados [04:33].
• El detalle de propiedad como ruta dinámica, bien modelada porque cada propiedad es un recurso individual [04:45].
• Favoritos como página independiente, ya que representa una colección personal del usuario que más adelante podría requerir autenticación [05:14].

Qué mejoras arquitectónicas puedes considerar a futuro

Devin también sugirió recomendaciones opcionales para que el diseño sea más realista si la app crece. Una es considerar rutas anidadas, agrupando profile y favoritos bajo una ruta como account, ya que ambas pertenecen a un usuario [05:37].

La observación más llamativa fue sobre la ruta /booking/id, que puede ser ambigua. Ese identificador podría interpretarse de dos formas: la propiedad que se quiere reservar o el ID de una reserva ya creada [06:14]. Para evitar confusión a futuro, se podría usar algo como properties/id/booking, aunque no es necesario mientras la app siga siendo pequeña [06:40].

El veredicto final fue claro: la arquitectura está bien para una app multipágina con React Router, la separación por páginas es clara y didáctica, y no hay una mala decisión grave en el mapa actual [06:59].

Con el mapa de rutas definido, ya sabes qué pantallas tendrás y cómo se conectan. El siguiente paso es instalar y configurar React Router para que esas rutas empiecen a existir dentro del proyecto y puedas navegarlas. ¿Qué rutas agregarías tú a un clon de Airbnb? Cuéntame en los comentarios.