React Router
React Router es una biblioteca fundamental para la gestión de la navegación en aplicaciones React, especialmente en aplicaciones de una sola página (SPA). Permite definir rutas que mapean URLs a componentes específicos, lo que facilita la construcción de interfaces dinámicas sin recargar la página. Esto mejora la experiencia del usuario y la eficiencia de la aplicación.
Se utiliza React Router cuando una aplicación requiere múltiples vistas o páginas. Se integra directamente con conceptos clave de React, como componentes, manejo de estado, flujo de datos y ciclo de vida de los componentes. Permite evitar problemas comunes como el prop drilling excesivo, re-renderizados innecesarios y mutaciones de estado no controladas.
En este tutorial aprenderás a crear rutas estáticas y dinámicas, a utilizar el componente Link para navegación declarativa, a obtener parámetros de URL mediante useParams y a proteger rutas con un componente ProtectedRoute. También se abordarán buenas prácticas de manejo de estado y ciclo de vida, siguiendo estándares de desarrollo en React.
Ejemplo Básico
jsximport React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function Home() {
return <h2>Página Principal</h2>;
}
function About() {
return <h2>Acerca de</h2>;
}
function App() {
return ( <Router> <nav> <Link to="/">Inicio</Link> | <Link to="/about">Acerca de</Link> </nav> <Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> </Routes> </Router>
);
}
export default App;En este ejemplo básico, BrowserRouter envuelve la aplicación para proporcionar el contexto de enrutamiento. Routes agrupa todas las rutas, y Route asigna cada URL a un componente específico. El componente Link permite la navegación sin recargar la página, preservando el estado de la aplicación.
Los componentes Home y About son funcionales y muestran separación de responsabilidades, siguiendo la filosofía de componentes de React. Este ejemplo ilustra conceptos clave de React Router: enrutamiento declarativo, navegación mediante componentes y compatibilidad con el manejo de estado sin generar re-renderizados innecesarios.
Ejemplo Práctico
jsximport React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, Navigate } from 'react-router-dom';
function Dashboard() {
const [user, setUser] = useState(null);
useEffect(() => {
setTimeout(() => setUser({ name: 'Ana', role: 'admin' }), 1000);
}, []);
if (!user) return <p>Cargando...</p>;
return <h2>Bienvenida, {user.name}, al Dashboard</h2>;
}
function Profile() {
const { username } = useParams();
return <h2>Perfil de usuario: {username}</h2>;
}
function ProtectedRoute({ children }) {
const isAuthenticated = true;
return isAuthenticated ? children : <Navigate to="/" />;
}
function App() {
return ( <Router> <nav> <Link to="/">Inicio</Link> | <Link to="/dashboard">Dashboard</Link> | <Link to="/profile/Ana">Perfil</Link> </nav> <Routes>
<Route path="/" element={<h2>Página Principal</h2>} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/profile/:username" element={<Profile />} /> </Routes> </Router>
);
}
export default App;En este ejemplo avanzado, Dashboard utiliza useState y useEffect para cargar datos de forma asincrónica, demostrando el ciclo de vida del componente. Profile obtiene parámetros dinámicos de la URL mediante useParams, evitando prop drilling.
ProtectedRoute protege rutas, redirigiendo usuarios no autenticados con Navigate. Este patrón permite la reutilización de componentes, optimiza el rendimiento y facilita la creación de rutas dinámicas y seguras, esenciales en aplicaciones modernas de React.
Las buenas prácticas al usar React Router incluyen construir componentes reutilizables, gestionar eficientemente el estado, usar rutas dinámicas y aprovechar el ciclo de vida del componente. Debes evitar mutaciones directas del estado, prop drilling excesivo y re-renderizados innecesarios. Para depuración, utiliza React DevTools; para optimización, React.memo y useCallback; y para componentes grandes, carga diferida (lazy loading) con Suspense. Las rutas sensibles siempre deben estar protegidas.
📊 Tabla de Referencia
| React Element/Concept | Description | Usage Example |
|---|---|---|
| BrowserRouter | Proporciona el contexto de enrutamiento | <BrowserRouter><App /></BrowserRouter> |
| Routes | Agrupa todas las rutas de la aplicación | <Routes><Route path="/" element={<Home />} /></Routes> |
| Route | Define un path y su componente | <Route path="/about" element={<About />} /> |
| Link | Navegación declarativa sin recargar página | <Link to="/about">Acerca de</Link> |
| useParams | Obtiene parámetros de rutas dinámicas | const { id } = useParams(); |
| Navigate | Redirección programática | <Navigate to="/login" /> |
React Router permite un enfoque declarativo para la navegación, ideal para SPA. Aprender a manejar rutas estáticas y dinámicas, proteger rutas y conectar el enrutamiento con el estado y el ciclo de vida de los componentes permite construir aplicaciones robustas y optimizadas. Para profundizar, se recomienda estudiar hooks avanzados, lazy loading, integración con Context API o Redux y técnicas de optimización de rendimiento, aplicando estos conceptos en proyectos reales para consolidar el aprendizaje.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior