15. React Router Dom dinámico
Tutorial: 15. React Router Dom Dinámico
📌 Introducción
En este tutorial aprenderemos a crear rutas dinámicas en React utilizando React Router DOM. Esto nos permitirá reutilizar componentes mostrando contenido diferente según los parámetros que recibamos en la URL.
🎯 Objetivos
Crear rutas con parámetros dinámicos
Recuperar y utilizar parámetros de la URL
Reutilizar componentes de forma dinámica
🛠️ Configuración Inicial
Primero, asegúrate de tener instalado React Router DOM:
bash
npm install react-router-dom
📁 Estructura de Componentes
1. App.js - Configuración de Rutas
jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Contact from './Contact';
import AboutMe from './AboutMe';
import Profile from './Profile';
function App() {
return (
<div className="App">
<header className="App-header">
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
<li>
<Link to="/about-me">About Me</Link>
</li>
<li>
<Link to="/profile">Profile</Link>
</li>
</ul>
</div>
<Routes>
<Route path="/contact" element={<Contact />} />
<Route path="/about-me" element={<AboutMe />} />
{/* Ruta dinámica con parámetro :name */}
<Route path="/profile/:name" element={<Profile />} />
</Routes>
</Router>
</header>
</div>
);
}
export default App;
2. Profile.js - Componente Dinámico
Creamos el componente Profile.js que recibirá parámetros dinámicos:
jsx
import { useParams } from "react-router-dom";
export default function Profile() {
// useParams() nos permite extraer los parámetros de la URL
const { name } = useParams();
console.log(name); // Veremos el nombre en consola
return (
<div>
<p>Desde Profile de {name}</p>
</div>
);
}
🔧 Explicación Paso a Paso
Paso 1: Crear la Ruta Dinámica
En la configuración de rutas, definimos una ruta con parámetro dinámico usando :nombreParametro:
jsx
<Route path="/profile/:name" element={<Profile />} />
:name indica que esta parte de la URL será dinámica
Ejemplo: /profile/rafa, /profile/maria, /profile/juan
Paso 2: Enlaces con Parámetros Dinámicos
Podemos crear enlaces que pasen diferentes valores al parámetro:
jsx
<ul>
<li><Link to="/profile/rafa">Perfil de Rafa</Link></li>
<li><Link to="/profile/pepe">Perfil de Pepe</Link></li>
<li><Link to="/profile/juan">Perfil de Juan</Link></li>
</ul>
Paso 3: Recuperar Parámetros en el Componente
En el componente Profile, usamos el hook useParams() para acceder a los parámetros:
jsx
const { name } = useParams();
// Si la URL es: localhost:3000/profile/rafa
// name = "rafa"
Paso 4: Usar los Parámetros en el Componente
Podemos utilizar el parámetro para personalizar el contenido:
jsx
export default function Profile() {
const { name } = useParams();
return (
<div>
<h1>Perfil de {name.toUpperCase()}</h1>
<p>Bienvenido a tu perfil, {name}.</p>
{/* Podríamos aquí hacer una petición a una API
para cargar datos específicos de este usuario */}
</div>
);
}
🌐 Ejemplos de URLs y Resultados
💡 Casos de Uso Comunes
1. Perfiles de Usuario
jsx
// URL: /user/123
<Route path="/user/:userId" element={<UserProfile />} />
2. Productos en E-commerce
jsx
// URL: /product/iphone-13
<Route path="/product/:productSlug" element={<ProductPage />} />
3. Artículos de Blog
jsx
// URL: /blog/react-tutorial
<Route path="/blog/:articleSlug" element={<Article />} />
⚠️ Consideraciones Importantes
Validación de Parámetros
jsx
export default function Profile() {
const { name } = useParams();
// Validar que el parámetro existe
if (!name) {
return <p>No se ha especificado un nombre de perfil</p>;
}
return (
<div>
<p>Perfil de {name}</p>
</div>
);
}
Múltiples Parámetros
jsx
// Ruta con múltiples parámetros
<Route path="/category/:categoryId/product/:productId" element={<ProductDetail />} />
// En el componente
const { categoryId, productId } = useParams();
🎨 Ejercicio Práctico
Crea una nueva ruta dinámica para artículos: /article/:id
Crea el componente Article.js que muestre el ID del artículo
Agrega 3 enlaces con diferentes IDs
Modifica el componente para mostrar diferentes contenidos según el ID
📚 Resumen
useParams(): Hook para extraer parámetros de la URL
:parametro: Sintaxis para definir parámetros dinámicos en rutas
Reutilización: Un mismo componente puede mostrar contenido diferente según los parámetros
SEO amigable: Las URLs dinámicas son más legibles y mejor para SEO
🔄 Mejora Continua
Una vez dominadas las rutas dinámicas básicas, puedes explorar:
Rutas anidadas (nested routes)
Protección de rutas (rutas privadas)
Lazy loading de componentes
Manejo de errores 404
¡Ahora tienes el poder de crear aplicaciones React con navegación dinámica y flexible! 🚀
Comentarios
Publicar un comentario