En React 19, la navegación y el enrutamiento son componentes esenciales para construir aplicaciones web dinámicas y de múltiples páginas. La biblioteca react-router-dom
es la herramienta más utilizada para este propósito. A continuación, exploraremos cómo configurar y utilizar la navegación y el enrutamiento en React 19.
Instalación de react-router-dom
Para comenzar, primero necesitamos instalar la biblioteca react-router-dom
. Esto se puede hacer utilizando npm o yarn:
npm install react-router-dom
o
yarn add react-router-dom
Configuración básica
Una vez instalada la biblioteca, podemos configurar nuestro enrutador. En el archivo principal de nuestra aplicación (por ejemplo, index.js
), importamos los componentes necesarios y envolvemos nuestra aplicación con BrowserRouter
:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
Definición de rutas
En el componente principal de la aplicación (App.js
), podemos definir nuestras rutas utilizando los componentes Routes
y Route
:
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
);
}
export default App;
Navegación entre rutas
Para navegar entre rutas, podemos utilizar el componente Link
o la función useNavigate
. El componente Link
reemplaza a los enlaces HTML tradicionales:
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
import React from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);
}
export default Navbar;
Parámetros de ruta
Podemos definir rutas con parámetros utilizando :
. Para acceder a estos parámetros, usamos el hook useParams
:
import React from 'react';
import { useParams } from 'react-router-dom';
function UserProfile() {
let { userId } = useParams();
return <div>User ID: {userId}</div>;
}
Y en la configuración de rutas:
<Routes>
<Route path="/user/:userId" element={<UserProfile />} />
</Routes>
Redirecciones
Para redirigir a los usuarios a otra ruta, utilizamos el componente Navigate
:
import React from 'react';
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}
Anidación de rutas
Podemos anidar rutas para crear una estructura más compleja:
import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
);
}
function Layout() {
return (
<div>
<Navbar />
<Outlet />
</div>
);
}
export default App;
Esta configuración permite que Navbar
se renderice en todas las rutas definidas dentro del componente Layout
.
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