Rutas dinámicas con React Router DOM y useParams

Las rutas dinámicas son la base de cualquier app moderna que muestre contenido distinto según la URL: un blog post, una clase, un perfil. Con useParams de React Router Dom v6 puedes leer ese fragmento variable de la URL (el slug) y renderizar contenido distinto reutilizando un mismo componente. Esta guía te muestra cómo hacerlo paso a paso usando un blog como ejemplo.

Qué es un slug y por qué importa en una ruta dinámica

Imagina que entras a platzi.com/clases/como-aprender-react. Esa última parte, como-aprender-react, es el slug: el identificador único que le dice a tu app qué contenido mostrar dentro de una misma plantilla [02:15]. La estructura de la vista (videoplayer, título, profesor, comentarios) se mantiene, pero el contenido cambia según ese identificador.

En React Router defines ese segmento variable con dos puntos seguidos del nombre, así: /blog/:slug. Lo que sea que venga después de /blog/ queda capturado bajo esa variable y disponible para tu componente.

¿Qué es un slug en una URL? Es la parte final y legible que identifica un recurso único, como que-es-react en /blog/que-es-react. Funciona como una llave para buscar el contenido correcto.

Cómo construir la lista de enlaces con datos simulados

Antes de leer parámetros, necesitas algo que enlace hacia esas rutas dinámicas. La idea es tener un arreglo blogData con objetos que contengan al menos title, slug, content y author, y luego mapearlo en la página del blog [05:40].

La estructura queda así:

• Un archivo blogData.js que exporta el arreglo con los posts.
• Un componente BlogPage que importa blogData y hace .map sobre él.
• Un componente interno BlogLink que recibe el post por props y renderiza un <Link> apuntando a /blog/${post.slug}.

jsx function BlogLink({ post }) { return ( <li> <Link to={/blog/${post.slug}}>{post.title}</Link> </li> ); }

Cada slug debe ser único, porque dos URLs idénticas no pueden coexistir en el enrutador. Si necesitas otro identificador interno, agrégalo como propiedad aparte (por ejemplo id), pero el slug manda en la URL.

Cómo leer parámetros de la URL con useParams

Aquí entra la pieza clave. Cuando defines la ruta como /blog/:slug en tu App.js, React Router guarda ese valor y te lo entrega a través del hook useParams, que importas desde react-router-dom [10:25].

Dentro de tu componente BlogPost lo usas con desestructuración:

jsx import { useParams } from 'react-router-dom'; import { blogData } from './blogData';

function BlogPost() { const { slug } = useParams(); const blogPost = blogData.find(post => post.slug === slug);

return ( <> <h2>{blogPost.title}</h2> <p>{blogPost.author}</p> <p>{blogPost.content}</p> </> ); }

Fíjate en el flujo: useParams te devuelve el slug desde la URL, luego usas .find() sobre el arreglo para localizar el post que coincida, y finalmente renderizas sus campos. En una app real, ese .find() se reemplaza por una llamada a una API que reciba el slug como parámetro.

¿Qué devuelve useParams en React Router 6? Devuelve un objeto con todas las variables definidas en la ruta con :. Si tu ruta es /blog/:slug, obtienes { slug: 'valor-de-la-url' }.

Por qué separar blogData en su propio archivo

Mover el arreglo blogData a un archivo independiente permite que tanto BlogPage (la lista) como BlogPost (el detalle) lo importen sin duplicar datos [13:50]. Es un patrón básico de organización que te prepara para sustituir esos datos por una capa de servicios real.

Cómo se ve el resultado de una ruta dinámica funcional

Cuando todo está conectado, la magia se nota: entras a /blog, ves la lista de publicaciones, haces clic en ¿Qué es React? y aterrizas en /blog/que-es-react con el título, autor y contenido específicos. Cambias a /blog/que-es-vue y el mismo componente BlogPost se rellena con datos distintos, sin que tú hayas escrito una ruta manual por cada post.

Esa es la potencia de las rutas dinámicas: un solo componente, infinito contenido, todo gobernado por el slug de la URL y la lectura que useParams hace de ella.

En la siguiente entrega vas a conocer useNavigate, otro hook de React Router Dom que te permite cambiar de ruta sin depender de los componentes Link o NavLink. ¿Ya estás usando rutas dinámicas en algún proyecto? Cuéntame en los comentarios cómo las estructuras tú.