Definición y uso de rutas anidadas
Las rutas anidadas en React Router permiten definir rutas dentro de otras rutas, lo que facilita la estructura jerárquica de las aplicaciones. Este enfoque es útil para aplicaciones que tienen una navegación compleja con múltiples niveles de profundidad.
Para definir rutas anidadas, se utiliza el componente <Routes>
y el componente <Route>
. El componente <Route>
puede contener otros componentes <Route>
como hijos, lo que indica que esas rutas son accesibles solo cuando la ruta padre está activa.
Ejemplo básico de rutas anidadas:
// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Dashboard from './pages/Dashboard/Dashboard';
import Settings from './pages/Settings/Settings';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
);
}
En este ejemplo, la ruta raíz ("/"
) utiliza el componente Layout
. Dentro de Layout
, se definen varias rutas anidadas: Home
, About
y Dashboard
. La ruta Dashboard
a su vez tiene una ruta hija Settings
.
Para que las rutas anidadas funcionen correctamente, es necesario renderizar el elemento hijo en el componente padre utilizando el componente <Outlet>
del paquete react-router-dom
. El componente <Outlet>
actúa como un marcador de posición para los componentes hijos.
Ejemplo de uso de <Outlet>
en el componente Dashboard
:
// Dashboard.jsx
import { Outlet } from 'react-router-dom';
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}
En este ejemplo, cuando se navega a la ruta /dashboard
, se renderiza el componente Dashboard
y, si se navega a /dashboard/settings
, el componente Settings
se renderiza dentro del Outlet
del Dashboard
.
Para navegar entre estas rutas, se pueden utilizar los componentes <Link>
o <NavLink>
de react-router-dom
:
// Layout.jsx
import { Link, Outlet } from 'react-router-dom';
export default function Layout() {
return (
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/dashboard">Dashboard</Link></li>
</ul>
</nav>
<Outlet />
</div>
);
}
En este ejemplo, el componente Layout
proporciona una navegación básica entre las rutas Home
, About
y Dashboard
. El componente Outlet
en Layout
asegura que los componentes hijos se rendericen en el lugar adecuado.
Uso de Outlet
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
El componente <Outlet>
es fundamental en React Router para renderizar rutas anidadas. Actúa como un marcador de posición donde los componentes de las rutas hijas se renderizan. Esto permite que una ruta padre contenga rutas hijas que se renderizan en el contexto del componente padre.
Para utilizar <Outlet>
, primero asegúrate de que las rutas hijas estén definidas dentro de una ruta padre en el componente <Routes>
. Luego, coloca <Outlet>
en el componente padre donde deseas que se rendericen las rutas hijas.
Ejemplo de configuración de rutas con <Outlet>
:
// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Dashboard from './pages/Dashboard/Dashboard';
import Settings from './pages/Settings/Settings';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
);
}
En este ejemplo, la ruta "/dashboard"
tiene una ruta hija "/dashboard/settings"
. Para que la ruta hija se renderice correctamente, el componente Dashboard
debe usar <Outlet>
:
// Dashboard.jsx
import { Link, Outlet } from "react-router-dom";
export default function Dashboard() {
return (
<div>
<h1>Dashboard Page</h1>
<Link to="settings">Settings</Link>
<Outlet />
</div>
);
}
Cuando se navega a /dashboard
, se renderiza el componente Dashboard
. Si se navega a /dashboard/settings
, el componente Settings
se renderiza en el lugar donde está el <Outlet>
en Dashboard
.
Otro ejemplo práctico es usar <Outlet>
en un componente de diseño general:
// Layout.jsx
import { Link, Outlet } from 'react-router-dom';
export default function Layout() {
return (
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/dashboard">Dashboard</Link></li>
</ul>
</nav>
<Outlet />
</div>
);
}
En este caso, Layout
proporciona una barra de navegación y un <Outlet>
para renderizar las rutas hijas correspondientes.
El uso de <Outlet>
no se limita a un solo nivel de anidación. Puedes tener múltiples niveles de rutas anidadas, cada uno con su propio <Outlet>
:
// NestedDashboard.jsx
import { Outlet } from 'react-router-dom';
export default function NestedDashboard() {
return (
<div>
<h2>Nested Dashboard</h2>
<Outlet />
</div>
);
}
// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Dashboard from './pages/Dashboard/Dashboard';
import NestedDashboard from './pages/NestedDashboard/NestedDashboard';
import Settings from './pages/Settings/Settings';
import Profile from './pages/Profile/Profile';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />}>
<Route path="nested" element={<NestedDashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</Route>
</Route>
</Route>
</Routes>
</BrowserRouter>
);
}
En este ejemplo, la ruta "/dashboard/nested"
tiene sus propias rutas hijas "/dashboard/nested/settings"
y "/dashboard/nested/profile"
, que se renderizan dentro del <Outlet>
de NestedDashboard
.
Definición y uso de rutas dinámicas
Las rutas dinámicas en React Router permiten definir rutas que incluyen parámetros variables, lo que permite crear rutas más flexibles y dinámicas. Para definir una ruta dinámica, se utiliza el símbolo de dos puntos :
seguido del nombre del parámetro en la ruta.
Ejemplo de definición de una ruta dinámica:
// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import UserProfile from './pages/UserProfile/UserProfile';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="user/:userId" element={<UserProfile />} />
</Route>
</Routes>
</BrowserRouter>
);
}
En este ejemplo, la ruta "/user/:userId"
define un parámetro dinámico userId
que puede tomar cualquier valor. Cuando se navega a una URL como /user/123
, el valor 123
se asigna al parámetro userId
.
Para acceder al valor de un parámetro dinámico dentro de un componente, se utiliza el hook useParams
de react-router-dom
:
// UserProfile.jsx
import { useParams } from 'react-router-dom';
export default function UserProfile() {
const { userId } = useParams();
return (
<div>
<h1>Perfil del usuario {userId}</h1>
</div>
);
}
En este ejemplo, el hook useParams
devuelve un objeto con los parámetros de la ruta. El componente UserProfile
obtiene el valor de userId
y lo utiliza para renderizar información específica del usuario.
Es posible definir múltiples parámetros dinámicos en una sola ruta:
// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './pages/Layout/Layout';
import BlogPost from './pages/BlogPost/BlogPost';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="blog/:year/:month/:slug" element={<BlogPost />} />
</Route>
</Routes>
</BrowserRouter>
);
}
En este ejemplo, la ruta "/blog/:year/:month/:slug"
define tres parámetros dinámicos: year
, month
, y slug
. Estos parámetros pueden ser utilizados dentro del componente BlogPost
:
// BlogPost.jsx
import { useParams } from 'react-router-dom';
export default function BlogPost() {
const { year, month, slug } = useParams();
return (
<div>
<h1>Post del blog - {year}/{month}</h1>
<p>Slug: {slug}</p>
</div>
);
}
El hook useParams
facilita la obtención de los valores de los parámetros dinámicos, permitiendo que los componentes sean más reutilizables y flexibles.
Para navegar a una ruta dinámica, se pueden utilizar los componentes <Link>
o <NavLink>
de react-router-dom
con interpolación de strings:
// Layout.jsx
import { Link, Outlet } from 'react-router-dom';
export default function Layout() {
return (
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/user/123">Perfil del usuario 123</Link></li>
<li><Link to="/blog/2024/04/introduccion-a-react">Post de blog</Link></li>
</ul>
</nav>
<Outlet />
</div>
);
}
En este ejemplo, los enlaces navegan a rutas dinámicas con valores específicos para los parámetros. Esto permite una navegación más rica y específica en la aplicación.
Aprendizajes de esta lección
- Comprender la definición y uso de rutas anidadas en React Router.
- Implementar rutas anidadas con
<Routes>
y<Route>
en una aplicación React. - Utilizar el componente
<Outlet>
para renderizar componentes hijos en rutas anidadas. - Configurar y utilizar rutas dinámicas con parámetros variables en React Router.
- Acceder a los parámetros dinámicos mediante el hook
useParams
. - Navegar entre rutas anidadas y dinámicas utilizando
<Link>
y<NavLink>
.
Completa React y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs