React Router: Rutas Dinámicas y Parámetros de Ruta

El enrutamiento dinámico permite crear rutas que aceptan parámetros, haciendo tu app más flexible y basada en datos. React Router facilita definir y usar estos parámetros para contenido dinámico.

¿Qué es el enrutamiento dinámico?

Las rutas dinámicas usan parámetros en la ruta, como /users/:id, para mostrar contenido diferente según la URL. Esto es esencial para perfiles de usuario, páginas de productos y cualquier contenido que dependa de un identificador.

Buenas prácticas

• Usa parámetros de ruta para páginas de detalle (por ejemplo, /user/:id).
• Valida y maneja parámetros faltantes o inválidos de forma adecuada.
• Mantén las rutas dinámicas organizadas y fáciles de leer.

Ejemplo: Ruta de perfil de usuario

Así se define y usa una ruta dinámica:

1import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";
2
3function UserProfile() {
4  const { id } = useParams();
5  return <h2>ID de usuario: {id}</h2>;
6}
7
8function App() {
9  return (
10    <BrowserRouter>
11      <Routes>
12        <Route path="/user/:id" element={<UserProfile />} />
13      </Routes>
14    </BrowserRouter>
15  );
16}

• /user/123 renderizará User ID: 123.
• useParams() te da acceso a los parámetros de la ruta.

Rutas Anidadas

Las rutas anidadas te permiten renderizar componentes hijos dentro de rutas padre, facilitando la creación de layouts complejos en aplicaciones React.

¿Qué son las Rutas Anidadas?

Las rutas anidadas te permiten definir rutas dentro de otras rutas. Esto es útil para dashboards, layouts o cualquier página con subsecciones. Ayudan a organizar tu app y reflejar su estructura en la URL.

Buenas Prácticas

• Usa rutas anidadas para que coincidan con el layout y la jerarquía de navegación de tu app.
• Mantén los componentes padre e hijo claros y separados.
• Usa <Outlet /> para renderizar rutas hijas dentro de componentes padre.

Ejemplo: Dashboard con Rutas Anidadas

Así se configuran rutas anidadas:

1import { BrowserRouter, Routes, Route, Outlet, Link } from "react-router-dom";
2
3function Dashboard() {
4  return (
5    <div>
6      <h2>Dashboard</h2>
7      <nav>
8        <Link to="profile">Perfil</Link>
9        <Link to="settings">Configuración</Link>
10      </nav>
11      <Outlet />
12    </div>
13  );
14}
15
16function Profile() {
17  return <h3>Página de Perfil</h3>;
18}
19
20function Settings() {
21  return <h3>Página de Configuración</h3>;
22}
23
24function App() {
25  return (
26    <BrowserRouter>
27      <Routes>
28        <Route path="dashboard" element={<Dashboard />}>
29          <Route path="profile" element={<Profile />} />
30          <Route path="settings" element={<Settings />} />
31        </Route>
32      </Routes>
33    </BrowserRouter>
34  );
35}

• <Outlet /> renderiza la ruta hija coincidente.
• Los elementos <Route> anidados definen subpáginas.

Conclusión

El enrutamiento dinámico te permite crear páginas flexibles y basadas en datos en React. Usa parámetros de ruta para mostrar contenido según la URL y brindar una experiencia personalizada. Las rutas anidadas te ayudan a organizar tu aplicación React y crear layouts con múltiples niveles de navegación. Úsalas para mantener tu código limpio y tu navegación intuitiva.