React Router: cómo convertir pantallas en app real

El routing en React es el mecanismo que conecta una dirección web con una pantalla específica de tu aplicación, y es lo que transforma una simple pantalla con componentes en una app real y navegable. Esta guía es para quienes ya construyeron una interfaz básica y quieren que su proyecto se comporte como una aplicación de verdad, con secciones, caminos y direcciones que el usuario puede visitar, compartir o guardar.

Trabajaremos con Platzi Host, una app sencilla estilo Airbnb que muestra propiedades: cards, imágenes, precios, ubicaciones y una búsqueda básica. Es una buena base, pero hay una gran diferencia entre tener una pantalla con cosas adentro y tener una aplicación real.

Por qué una pantalla no es lo mismo que una app real

Piensa en cualquier aplicación que usas todos los días. Abres Instagram, tocas una foto, entras al perfil de esa persona, revisas su biografía, ves sus publicaciones y luego tocas atrás. Vuelves exactamente al lugar donde estabas.

No se recarga toda la página, no pierdes tu posición y no tienes que empezar de cero. Todo simplemente fluye. Eso pasa porque la app entiende la navegación [00:38].

Ahora piensa en Platzi Host. Tienes una pantalla con propiedades, pero si alguien quiere entrar al detalle de una propiedad, guardar una en favoritos, hacer una reserva o ver su perfil, la app necesita saber a qué pantalla debe ir ese usuario. Ahí aparece el concepto central del curso.

¿Qué es el routing en React? Es el mecanismo que conecta una dirección web con una pantalla específica de tu aplicación. Cuando entras a una URL, la app sabe exactamente qué componente mostrar.

Cómo funciona el routing con las URLs

El routing, o enrutamiento en español, hace que cada sección tenga su propio lugar y cada pantalla su propia dirección. La app decide qué mostrar según la URL.

Estos son ejemplos concretos de cómo se conectan las direcciones con las pantallas en Platzi Host:

• La ruta / muestra la home de la aplicación.
• La ruta /search muestra los resultados de búsqueda.
• La ruta /properties/3 muestra el detalle de una propiedad específica.

Esa última dirección es especialmente interesante: el 3 es un dato que viaja dentro de la URL para decirle a la app qué propiedad cargar. A eso lo llamamos ruta dinámica [01:52], y lo veremos a fondo más adelante.

Por qué React no hace routing por sí solo

Aquí viene lo importante: React por sí mismo no maneja la navegación. React sabe renderizar componentes, manejar estado y actualizar la interfaz, pero no viene con un sistema completo para gestionar URLs, navegar entre pantallas, crear rutas dinámicas o mostrar páginas de error [02:15].

Para resolver eso existen varias soluciones, y la que usaremos es React Router [02:30].

¿Para qué sirve React Router? Es la librería que agrega a React un sistema completo de navegación: conectar URLs con componentes, moverse entre pantallas, crear rutas dinámicas y manejar errores.

Qué construiremos con React Router

Vamos a tomar Platzi Host y convertirlo en una aplicación con varias páginas reales. Estas son las pantallas y flujos que crearemos:

• Una home y una página de búsqueda.
• El detalle de cada propiedad y una sección de favoritos.
• Perfil, login simulado y un flujo de reserva.
• Una página de error para cuando alguien llegue a una dirección que ya no existe.

Pero no crearemos páginas sueltas porque sí. Vamos a conectarlas, navegar entre ellas y pasar información usando la URL.

Qué habilidades vas a desarrollar

Más allá de armar pantallas, aprenderás técnicas que hacen que una app se sienta profesional:

• Crear rutas dinámicas para pasar información a través de la URL [03:05].
• Proteger secciones para controlar quién puede acceder a ellas.
• Cargar datos por ruta según la pantalla que visita el usuario.
• Manejar errores cuando algo no sale como esperamos.

¿Qué es una ruta dinámica? Es una dirección que incluye un valor variable, como /properties/3, donde el número identifica qué contenido cargar. Así una sola ruta sirve para mostrar cualquier propiedad.

Este es el punto donde tu proyecto deja de ser una pantalla bonita y empieza a comportarse como una aplicación real: navegable, organizada y lista para crecer.

El siguiente paso es diseñar el mapa de rutas de Platzi Host, con todas las pantallas que tendrá la app y cómo se conectan entre sí, antes de escribir una sola línea de código. ¿Ya tienes claro qué pantallas necesitaría tu propia app? Cuéntame en los comentarios.