El enrutamiento dinámico y la navegación programática son dos piezas clave cuando trabajas con React Router Dom y necesitas que tu aplicación responda a parámetros variables o redirija usuarios desde el código. Si estás aprendiendo a construir SPAs con React, dominar estos dos conceptos te permite crear vistas de perfil, fichas de producto y flujos de redirección sin recargar la página.

¿Qué es el enrutamiento dinámico en React Router?

El enrutamiento dinámico se refiere a rutas que reciben un parámetro variable dentro de la URL. En lugar de declarar una ruta fija para cada caso, defines una sola que acepta cualquier valor.

Piensa en una app con cien productos. Sería absurdo escribir product1, product2, product3 y así hasta cien. La solución es usar un parámetro dinámico con la sintaxis de dos puntos seguidos del nombre del parámetro, por ejemplo product/:id.

¿Qué significa la sintaxis :id en una ruta? Es un marcador de posición que le dice a React Router que ese segmento de la URL puede tomar cualquier valor, y ese valor estará disponible como parámetro dentro del componente.

¿Cómo defino una ruta dinámica con un parámetro?

En el archivo App declaras la ruta usando el path con dos puntos antes del nombre del parámetro. Así queda lista para recibir cualquier valor en esa posición [01:50].

tsx <Route path="product/:id" element={<Product />} />

Luego, en los enlaces del menú apuntas a rutas concretas como product/1 y product/2. Cada una renderiza el mismo componente, pero con un id distinto.

¿Cómo accedo al parámetro de la URL con useParams?

Dentro del componente Product usas el hook useParams de React Router Dom para extraer el valor del parámetro [03:30]. Le pasas un tipo genérico para indicar la forma del objeto que devuelve.

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

const Product = () => { const { id } = useParams<{ id: string }>(); return ( <section> <h2>Product {id}</h2> </section> ); };

Cuando navegas a product/1, el componente recibe el id 1 y lo pinta en la vista. Lo mismo ocurre con product/2. Una sola ruta, infinitos productos posibles.

¿Qué es la navegación programática y cuándo usarla?

La navegación programática consiste en redirigir al usuario desde el código, sin que tenga que hacer clic en un enlace tradicional. La usas cuando un evento debe disparar el cambio de vista.

Los casos típicos son:

• Un botón que lleva a otra página al hacer clic.
• Un formulario que redirige al enviar los datos.
• Una validación que envía al usuario a una vista de error o éxito.

¿Cuál es la diferencia entre Link y navegación programática? Link es un elemento que el usuario hace clic directamente. La navegación programática se ejecuta desde una función en tu código, normalmente como respuesta a un evento.

¿Cómo funciona el hook useNavigate?

useNavigate es el hook que React Router Dom expone para mover al usuario entre rutas desde JavaScript. Lo importas, lo inicializas y lo invocas con la ruta de destino.

tsx import { useNavigate } from "react-router-dom";

const Home = () => { const navigate = useNavigate();

const goToAbout = () => { navigate("/about"); };

return ( <section> <h2>Home page</h2> <button onClick={goToAbout}>go to About</button> </section> ); };

Al hacer clic en el botón, la función goToAbout se ejecuta y dispara navigate con la ruta /about [07:40]. El usuario llega a esa vista sin recargar y sin necesidad de un enlace visible.

¿Cómo organizo los componentes en una app con React Router?

Una buena práctica es separar las vistas en una carpeta components dentro de src. Allí creas archivos como Home.tsx, About.tsx y Product.tsx, cada uno con su propia responsabilidad [03:00].

Dentro de Home puedes incluir la lista de enlaces a productos usando el componente Link importado desde React Router Dom. La etiqueta nav envuelve la navegación principal y cada Link va dentro de un li para mantener una estructura HTML semántica y evitar que los enlaces se vean pegados.

tsx

<nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/product/1">Product 1</Link></li> <li><Link to="/product/2">Product 2</Link></li> </ul> </nav>

Con esta estructura tienes lo mejor de los dos mundos: rutas estáticas para vistas fijas como home o about, y rutas dinámicas con parámetros para todo lo que escala, como fichas de producto o perfiles de usuario.

¿Ya intentaste combinar useParams con useNavigate en un mismo componente? Cuéntame en los comentarios qué flujo estás construyendo.