Domina cómo crear rutas con parámetros y mover a tus usuarios entre vistas con código. Aquí se explica, paso a paso y con claridad, cómo aplicar enrutamiento dinámico con product/:id y cómo hacer navegación programática con el hook de React Router DOM, integrando componentes como home, about y product de forma limpia y escalable.
¿Qué es el enrutamiento dinámico y cómo usar product/:id?
El enrutamiento dinámico permite construir rutas que aceptan un parámetro (como un ID) para renderizar una vista específica. En lugar de crear cien rutas para cada producto, se usa un patrón único con dos puntos y un identificador.
¿Cómo definir rutas dinámicas con product/:id?
- Agrega enlaces para productos: product/uno y product/dos en la navegación superior con nav y link.
- Declara la ruta como product/:id para indicar que el segmento es dinámico.
- Evita rutas repetitivas: no necesitas product-1, product-2, product-3 si usas :id.
- Mantén la sección de rutas clara cambiando la vista de about por product cuando corresponda.
¿Cómo leer el id en el componente product con useParams?
- Crea la carpeta Components y dentro los archivos home.tsx, about.tsx y product.tsx.
- En product.tsx, renderiza una sección con un título que muestre “product” y el ID recibido.
- Usa el hook useParams para obtener el parámetro de la URL y tipa el id como string.
- Importa el componente product en App para que la ruta lo renderice sin errores.
- Mejora el HTML de la navegación: coloca cada link dentro de su propio li para separar los enlaces.
¿Qué es la navegación programática y cómo implementarla con useNavigate?
La navegación programática redirige desde el código sin depender de un enlace directo. Útil tras un submit o al hacer click en un botón, por ejemplo para ir desde home a about.
¿Cómo mover al usuario con un botón y useNavigate?
- Crea el componente home con un título “Home page” y una lista de enlaces a product/uno y product/dos.
- Importa home en App y elimina duplicados para evitar conflictos.
- Importa el hook useNavigate y asígnalo a una constante, por ejemplo navigate.
- Crea la función go to about que llama a navigate con la ruta de about.
- Añade un button con evento de click que dispare go to about y coloca el texto “go to about”.
- Verifica en el navegador que el botón envía correctamente a la vista de about.
¿Qué buenas prácticas de estructura se aplican?
- Centraliza la navegación en home para una experiencia coherente.
- Organiza los componentes en la carpeta Components para mantener el proyecto escalable.
- Usa etiquetas semánticas: nav, ul y li para enlaces claros y separados.
- Ajusta estilos en Index.css para una interfaz más legible.
- Aplica tipado del parámetro con TypeScript para mayor seguridad en useParams.
¿En qué casos usarías navegación programática frente a un enlace tradicional? Comenta tus ideas y cuéntanos cómo estructurarías rutas dinámicas con múltiples parámetros.
