Rutas dinámicas en React Router con useParams

Cuando construyes una app con muchas páginas iguales pero contenido distinto, como Platzi House, no puedes escribir una ruta a mano para cada propiedad. Aquí aprenderás a crear una ruta dinámica en React Router y a leer su parámetro con el hook useParams. Es una habilidad clave para cualquier persona que desarrolle interfaces con navegación basada en datos.

Por qué necesitas una ruta dinámica en vez de rutas manuales

Imagina tener cien propiedades. Escribir cien rutas fijas sería insostenible. La solución es una sola ruta capaz de responder a distintos identificadores.

En Platzi House cada propiedad tiene un ID único. Si haces clic en una propiedad, la app intenta navegar a properties/1, pero muestra la página no encontrada [0:34]. ¿Por qué? Porque el router aún no tiene definida esa ruta y cualquier dirección que no haga match cae directo en el comodín.

¿Qué es una ruta dinámica? Es una ruta que usa una variable en lugar de un valor fijo. En React Router se escribe con dos puntos, por ejemplo /properties/:id, y responde a cualquier ID que llegue en la URL.

Esa es la diferencia entre una ruta rígida y una flexible: una atiende un solo caso, la otra atiende infinitos.

Cómo crear la página de detalle de propiedad

El primer paso es tener una página que renderice el single de cada propiedad. En el transcript se crea el archivo PropertyDetailPage.tsx [0:52].

Dentro de este componente ocurren tres cosas concretas:

1. Se importa el hook useParams desde React Router.
2. Se lee el id directamente de la URL usando ese hook.
3. Se muestra un título "Detalle de propiedad" junto con el ID leído [1:07].

tsx import { useParams } from "react-router";

export function PropertyDetailPage() { const { id } = useParams();

return ( <div> <h1>Detalle de propiedad</h1> <p>Estamos viendo la propiedad con ID {id}</p> </div> ); }

Con esto ya tienes el componente listo, pero todavía no funciona. Y aquí viene lo interesante: crear la página no basta si el router no la conoce.

Qué hace el hook useParams exactamente

useParams es el puente entre la URL y tu componente. Lee los parámetros dinámicos definidos en la ruta y te los entrega como valores que puedes usar dentro del código.

¿Para qué sirve useParams en React Router? Sirve para leer los valores variables de la URL. Si tu ruta es /properties/:id y visitas /properties/6, useParams te devuelve id con valor 6.

Esto es lo que permite que una sola página muestre información distinta según la dirección que abras.

Cómo registrar la ruta dinámica en el router

Si guardas y navegas antes de tocar el router, sigues viendo el error de página no encontrada [1:24]. El componente existe, pero nadie lo llama.

La solución es agregar la ruta dentro del router usando el mismo layout del main, ya que el diseño que necesitas es prácticamente idéntico [1:42]. Los pasos son:

• Definir la ruta como /properties/:id, donde los dos puntos indican que es una variable y no un número fijo.
• Renderizar el componente PropertyDetailPage como elemento de esa ruta.
• Importar el componente para evitar errores.

Una vez importado y guardado, la URL responde correctamente. La página muestra "Detalle de propiedad" y "estamos viendo la propiedad con ID uno" [2:12].

Cómo comprobar que la ruta dinámica funciona

La prueba real es cambiar de propiedad y ver si la página se adapta sola. En el ejemplo se vuelve al home y se hace clic en la última propiedad [2:24].

El resultado confirma que todo funciona: la página muestra "estamos viendo la propiedad con ID seis", exactamente el valor que aparece en la URL. Un solo componente respondiendo a distintos IDs, sin duplicar código.

Con esto lograste crear tu primera ruta dinámica y leer parámetros con el hook useParams. En la siguiente clase usarás ese ID para mostrar la información real de cada propiedad y así completar el single page.

Si quieres reforzar el concepto de hooks, revisa el curso de React y la documentación de useParams de React Router que están en la sección de recursos. ¿Ya probaste crear tu propia ruta dinámica? Cuéntame en los comentarios cómo te fue.