En React, las rutas permiten definir la navegación de tu aplicación web. Con ellas, puedes asociar una URL específica a un componente que se debe renderizar cuando el usuario accede a esa dirección. Esto es esencial para crear aplicaciones de una sola página (Single Page Applications, SPA), donde el contenido cambia sin recargar la página.
Prerrequisitos
- Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
- Estructura de un proyecto React Conocer los archivos principales, index.js, App.js, carpetas, etc.
- JSX Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
- En el post de componentes en React se dan los primeros pasos para crear un componente.
Crear un proyecto de prueba
Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:
npm create vite@latest
Donde seleccionamos:
> npx
> create-vite
|
o Project name:
| practicas-react
|
o Select a framework:
| React
|
o Select a variant:
| TypeScript
Por ultimo, ejecutamos
cd practicas-react
npm install
npm run dev
Vamos a crear un directorio llamado components en el directorio src donde crearemos los componentes de los hooks
React Router
React Router es una biblioteca que permite gestionar la navegación en aplicaciones React, tanto de una sola página (SPA) como de aplicaciones más complejas. Facilita la creación de rutas, navegación dinámica, y manejo del historial del navegador.
1️⃣ React Router te permite definir rutas asociadas a componentes, de modo que cada ruta corresponde a una parte específica de la aplicación.
- / → Componente Home
- /about → Componente About
2️⃣ Manejar la navegación entre páginas.
3️⃣ Trabajar con parámetros dinámicos en las rutas.
Instalación
Primero, asegúrate de tener instalado React Router:
npm install react-router-dom
Conceptos Básicos
1️⃣ Rutas: Las rutas se definen mediante el componente <Route />. Cada ruta tiene una dirección (path) y un componente asociado que se renderiza cuando se visita esa dirección.
2️⃣ Router: Actúa como el contenedor que gestiona el enrutamiento. Hay tres tipos principales:
- BrowserRouter: Utiliza el historial del navegador para manejar las rutas.
- HashRouter: Usa el hash (#) en la URL para manejar rutas.
- MemoryRouter: Almacena el historial en memoria (útil para pruebas).
3️⃣ Navegación: Usa el componente <Link /> o el hook useNavigate() para moverte entre rutas.
4️⃣ Switch/Routes:
En React Router v6 y superiores, usamos <Routes /> en lugar de <Switch />.
Ejemplo básico de rutas
Supongamos que queremos crear una aplicación con tres páginas: Inicio, Acerca de, y Contacto.
Primero vamos a modificar App.ts
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
function App() {
return (
<BrowserRouter>
<div>
<h1>Mi Aplicación</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Creamos la pagina home en src/pages/Home.tsx
export default function Home() {
return (
<div>
<h2>Página de Inicio</h2>
</div>
)
}
Creamos la pagina about en src/pages/About.tsx
export default function About() {
return (
<div>
<h2>Acerca de Nosotros</h2>
</div>
)
}
Creamos la pagina contact en src/pages/Contact.tsx
export default function Contact() {
return (
<div>
<h2>Página de Contacto</h2>
</div>
)
}
Agregar Navegación
Para moverte entre las páginas, puedes usar el componente <Link>, lo creamos en /src/componentes/Navbar.tsx:
import { Link } from "react-router-dom";
export default function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Inicio</Link>
</li>
<li>
<Link to="/about">Acerca de</Link>
</li>
<li>
<Link to="/contact">Contacto</Link>
</li>
</ul>
</nav>
);
}
Actualiza el archivo App.js para incluir la barra de navegación:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Navbar from "./components/Navbar";
function App() {
return (
<BrowserRouter>
<div>
<h1>Mi Aplicación</h1>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Explicación:
- path="/product/:id": Define un parámetro dinámico llamado id.
- useParams(): Permite acceder al parámetro desde el componente.
Navegación dinámica con parámetros
A veces, necesitas rutas dinámicas con parámetros (por ejemplo, /product/123 para un producto específico).
useNavigate(): Proporciona una función para navegar a rutas específicas desde el código.
Primero creamos una pagina llamada product en /src/pages/Product.tsx
import { useParams } from "react-router-dom"
export default function Product() {
const { id } = useParams()
return <h1>Producto ID: {id}</h1>
}
Realizamos la modificación App.tsx
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import "./App.css";
import Product from "./pages/Product";
import Home from "./pages/Home";
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/product/1">Producto 1</Link> |{" "}
<Link to="/product/2">Producto 2</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/product/:id" element={<Product />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Navegación programática con useNavigate
Puedes redirigir a una ruta desde el código con el hook useNavigate.
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
const Home = () => {
const navigate = useNavigate();
const goToAbout = () => {
navigate('/about'); // Navegar a /about programáticamente.
};
return (
<div>
<h1>Inicio</h1>
<button onClick={goToAbout}>Ir a Acerca de</button>
</div>
);
};
const About = () => <h1>Acerca de nosotros</h1>;
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
Explicación:
useNavigate(): Proporciona una función para navegar a rutas específicas desde el código.
Rutas protegidas (Private Routes)
Para aplicaciones que requieren autenticación, puedes usar rutas protegidas.
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
const isAuthenticated = false; // Simula si el usuario está autenticado.
const PrivateRoute = ({ children }) => {
return isAuthenticated ? children : <Navigate to="/" />;
};
const Home = () => <h1>Página pública</h1>;
const Dashboard = () => <h1>Panel privado</h1>;
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/dashboard"
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
/>
</Routes>
</Router>
);
}
export default App;
Explicación:
<PrivateRoute>: Comprueba si el usuario está autenticado.
<Navigate to="/" />: Redirige al usuario si no está autenticado.
Manejo de rutas inexistentes (404)
Agrega una ruta para manejar páginas no encontradas.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const NotFound = () => <h1>404 - Página no encontrada</h1>;
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<h1>Inicio</h1>} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;
Nested Routes
Nested Routes o rutas anidadas en React Router permiten definir rutas que están "dentro" de otras rutas, reflejando una jerarquía en la navegación de la aplicación. Esto es útil cuando tienes una interfaz con subpáginas que dependen de una página principal.
Por ejemplo:
- /dashboard → Página principal del panel.
- /dashboard/settings → Página de configuración dentro del panel.
- /dashboard/profile → Página del perfil dentro del panel.
React Router te permite renderizar componentes específicos dentro de un diseño común (como un Layout) gracias a las rutas anidadas.
¿Cómo funcionan las Nested Routes?
Cuando usas rutas anidadas:
- Definas un Outlet en el componente principal donde se renderizarán los componentes hijos.
- Los Route hijos se definen como elementos anidados dentro de un Route padre.
Ejemplo básico de Nested Routes
Estructura de rutas:
- / → Página de inicio.
- /dashboard → Contenedor principal.
- /dashboard/profile → Perfil.
- /dashboard/settings → Configuración.
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from "react-router-dom";
// Componentes
const Home = () => <h1>Página principal</h1>;
const Dashboard = () => (
<div>
<h1>Panel de Control</h1>
<nav>
<Link to="profile">Perfil</Link> | <Link to="settings">Configuración</Link>
</nav>
<Outlet /> {/* Aquí se renderizan las rutas hijas */}
</div>
);
const Profile = () => <h2>Perfil del Usuario</h2>;
const Settings = () => <h2>Configuración del Usuario</h2>;
// App principal
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="dashboard" element={<Dashboard />}>
{/* Rutas hijas */}
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</Router>
);
};
export default App;
Explicación
1. <Outlet />
- Es un marcador de posición que indica dónde se renderizarán los componentes hijos.
- Está en el componente padre (Dashboard).
2. Rutas anidadas
- Dentro de <Route path="dashboard"> defines rutas hijas (profile, settings).
- Estas rutas están relacionadas con /dashboard.
3. Navegación
- Usa rutas relativas (to="profile") para navegar a los componentes hijos.
Ejemplo avanzado con Layout compartido
A veces quieres que varias páginas compartan un diseño común (por ejemplo, un menú o encabezado).
Estructura:
- /dashboard:
- /dashboard/analytics → Análisis.
- /dashboard/reports → Informes.
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from "react-router-dom";
const DashboardLayout = () => (
<div>
<header>
<h1>Panel de Control</h1>
<nav>
<Link to="analytics">Análisis</Link> | <Link to="reports">Informes</Link>
</nav>
</header>
<main>
<Outlet /> {/* Aquí se renderizan los hijos */}
</main>
</div>
);
const Analytics = () => <h2>Página de Análisis</h2>;
const Reports = () => <h2>Página de Informes</h2>;
const App = () => {
return (
<Router>
<Routes>
<Route path="dashboard" element={<DashboardLayout />}>
<Route path="analytics" element={<Analytics />} />
<Route path="reports" element={<Reports />} />
</Route>
</Routes>
</Router>
);
};
export default App;
Explicación del ejemplo:
1. DashboardLayout:
- Contiene el diseño común, como encabezado o navegación.
- Usa <Outlet /> para renderizar dinámicamente las páginas hijas.
2. Rutas hijas:
- /dashboard/analytics: Renderiza el componente Analytics dentro del layout.
- /dashboard/reports: Renderiza el componente Reports dentro del layout.
Rutas anidadas dinámicas con parámetros
Si necesitas rutas dinámicas (por ejemplo, /dashboard/user/:id), puedes combinarlas con useParams.
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom";
const Dashboard = () => (
<div>
<h1>Panel de Control</h1>
<nav>
<Link to="user/1">Usuario 1</Link> | <Link to="user/2">Usuario 2</Link>
</nav>
<Outlet />
</div>
);
const UserDetails = () => {
const { id } = useParams(); // Obtén el parámetro dinámico de la URL
return <h2>Detalles del Usuario con ID: {id}</h2>;
};
const App = () => {
return (
<Router>
<Routes>
<Route path="dashboard" element={<Dashboard />}>
<Route path="user/:id" element={<UserDetails />} />
</Route>
</Routes>
</Router>
);
};
export default App;
Explicación:
- path="user/:id": Define un parámetro dinámico llamado id.
- useParams: Obtén el valor del parámetro en el componente.