Página de detalle con rutas dinámicas en React

Crear una página de detalle con rutas dinámicas en React es el paso que convierte una lista de propiedades en una aplicación con sentido real. Aquí aprenderás a leer el id de la URL, buscar la propiedad correcta dentro de tus datos y renderizar toda su información en pantalla. Es contenido ideal para quien construye su primera app con React Router.

En el proyecto de Platzi Host ya teníamos una ruta dinámica funcionando, pero solo mostraba el id. El reto ahora es usar ese identificador para encontrar una propiedad específica y desplegar su detalle completo: imagen, título, ubicación, precio y un botón de reserva.

Por qué la página de detalle es tan importante en la app

Esta pantalla no es una más. Prepara el terreno para funcionalidades que vienen después: reservas, favoritos y carga de datos por ruta. Cuando haces clic en cualquier propiedad, el enlace te lleva a properties/ seguido de su identificador, y ese id ya se lee dentro del PropertyDetailPage.

El problema era simple: teníamos el id, pero no la información. Para resolverlo, no usamos una API, sino datos mock, es decir, datos de prueba que simulan lo que traería un servidor real [00:34].

¿Qué son los datos mock? Son datos de prueba que imitan la respuesta de una API real. Te permiten construir y probar la interfaz sin necesidad de un backend conectado.

Cómo conectar la página con los datos de las propiedades

Lo primero es importar el listado de propiedades dentro del archivo. A partir de ahí, el editor sugiere crear una constante llamada property que usa el método find para localizar el ítem correcto según su id.

Y aquí viene el detalle que suele romper todo. El valor que llega por parámetros de la URL nunca es un número.

¿Por qué el id de la URL es un string y no un número? Porque los parámetros de la URL siempre llegan como texto. Aunque veas properties/1, ese 1 es un string para JavaScript, así que debes convertirlo antes de comparar.

Por eso se envuelve el valor dentro de la función Number de JavaScript. Así se fuerza la coincidencia entre el id del parámetro y el id numérico de tus datos [01:38].

jsx const property = properties.find( (item) => item.id === Number(id) );

Sin esa conversión, el find compararía un string contra un número y nunca encontraría la propiedad. El resultado sería una página vacía.

Qué estructura usa la página de detalle para renderizar todo

Una vez que tienes la propiedad, toca armar el layout. La estructura se divide en dos partes principales que trabajan juntas:

• Un div del lado izquierdo que contiene la imagen y un span para marcar el tipo de propiedad.
• Un section con el resto del contenido textual de la propiedad.

Dentro de ese section va la información que le da vida a la página:

1. Un título estático que dice "Alojamiento destacado", el cual está hardcodeado y siempre aparece igual.
2. El h1 con el título real de la propiedad, que viene de property.
3. La ubicación, el precio por noche y un link hacia el flujo de booking.

Ese link reutiliza el flujo de reserva creado en clases anteriores. Al principio marca error porque falta importarlo desde React Router, y la solución es agregarlo al mismo import donde ya está useParams [04:00].

jsx import { useParams, Link } from "react-router-dom";

Tras guardar, properties/1 ya muestra el contenido completo. Al hacer clic en una propiedad como Loft Urbano, aparece su imagen, título, dirección, precio por noche y el botón de reservar.

Cómo se aplican los estilos para que parezca una app real

El contenido funcional ya está, pero visualmente todavía queda plano. El siguiente paso fue reemplazar las clases de los elementos por unas ya preparadas y actualizar el index.css con los estilos nuevos [05:20].

Con ese cambio, la página single deja de verse como un borrador y toma un aspecto cercano a una aplicación real. Al probar con Cabaña en la montaña, se ve la imagen, la ubicación, el precio y el botón, todo acomodado.

Y el botón de reservar mantiene su lógica: enlaza al flujo de booking iniciando la reserva de esa propiedad específica. Cuando abres la propiedad cuatro, la URL de reserva muestra el id 4, aplicando el mismo useParams [06:20].

Así, cada propiedad tiene su propia URL y su propio detalle, funcionando de forma independiente. ¿Notaste cómo un solo componente sirve para infinitas propiedades? Ese es el poder de las rutas dinámicas.

¿Ya probaste conectar tus datos mock con una ruta dinámica? Cuéntame en los comentarios qué propiedad renderizaste primero.