Qué problema resuelve el routing en React

El routing en React es lo que convierte una aplicación de una sola pantalla en un producto multipágina real. Si estás construyendo algo más allá de un demo, necesitas conectar URLs con pantallas: home, búsqueda, detalle, favoritos, perfil y hasta una página de error. Esta guía es para quien ya domina componentes básicos y quiere escalar su proyecto.

Qué problema resuelve el routing en una aplicación real

Hasta ahora nuestra aplicación vive en una sola pantalla, pero un producto de verdad necesita varias secciones. Piensa en un sitio de propiedades: no basta con mostrar todo apilado en la misma vista.

Un producto real necesita home, resultados de búsqueda, detalle de una propiedad, favoritos, perfil, login y al menos una página de error cuando una ruta no existe o llega desde un link roto [00:11].

El routing resuelve exactamente esa necesidad. Sin él, estarías forzando toda la experiencia en un solo espacio, y eso no escala.

¿Qué es el routing en React? Es conectar URLs con pantallas. Cuando el usuario entra a /favoritos, muestras los favoritos; cuando entra a /propiedades/3, muestras el detalle de la propiedad con identificador tres.

Así de directo. Cada dirección apunta a una vista específica, y ese es el gran objetivo: convertir el proyecto Platzi House en una aplicación multipágina [01:00].

Cómo empezar el proyecto según tu punto de partida

Hay dos caminos para arrancar, y cuál elijas depende de dónde vengas.

• Si vienes del curso uno, esto te sirve como recap de dónde quedamos y escalas tu proyecto existente.
• Si llegas directo a este curso, usas la rama clase uno del repositorio, que ya trae componentes base, datos mock y estilos mínimos [01:32].

En cualquiera de los dos casos partes de una base lista para avanzar, disponible en la sección de recursos.

Cómo está estructurado el repositorio base

El proyecto es una aplicación de React hecha con Vite, y su organización es clara [02:35]. Dentro de source encuentras:

• Una carpeta de componentes.
• Una carpeta de data con los datos mock.
• Una carpeta de tipos.
• Una carpeta de utils, donde vive una función para filtrar propiedades.
• El archivo app.tsx, que es la aplicación principal donde se importan todos los componentes y se manejan los estados y funcionalidades actuales [01:56].

Parte de esa funcionalidad que hoy vive en app.tsx podríamos migrarla más adelante. Por ahora, lo importante es tener claro el punto de partida.

Cuál es el mapa de rutas que vamos a construir

Hasta este momento la aplicación tiene una sola ruta: el /, que muestra un home con búsqueda, listado de propiedades y algunos filtros [02:56]. La idea es hacerla mucho más robusta.

El home se mantiene en /, pero sumamos varias rutas nuevas para cubrir toda la experiencia del producto:

• /search para la búsqueda específica.
• /properties/ con un parámetro para el identificador, que muestra el detalle de cada propiedad.
• /favoritos para las propiedades guardadas.
• Una ruta de reservas con su identificador.
• /perfil y /login para la cuenta del usuario.
• La ruta con * (asterisco), que responde con el error 404 cuando llega un link roto o con datos faltantes [03:35].

Ese asterisco es tu red de seguridad: atrapa cualquier dirección que no reconozcas y evita que el usuario quede en una pantalla en blanco.

¿Para qué sirve la ruta con asterisco en React? Funciona como comodín. Captura cualquier URL que no coincida con las rutas definidas y muestra una página de error 404, en lugar de dejar la aplicación rota.

¿Qué es un parámetro de ruta como el identificador de una propiedad? Es una parte variable de la URL. En /properties/3, el 3 es el parámetro que le dice a la app cuál propiedad mostrar sin crear una ruta distinta por cada una.

El siguiente paso es definir el mapa de rutas del producto antes de instalar cualquier librería. Y si conceptos como componentes, util o hook todavía se te escapan, conviene reforzarlos en el curso de React antes de avanzar; el enlace está en la sección de recursos.

¿Ya tienes claro cómo quieres organizar las rutas de tu propio proyecto? Cuéntanos en los comentarios qué secciones agregarías.