React Router: Navegación y Enrutamiento Esencial

React Router es la biblioteca estándar para el enrutamiento en aplicaciones React. Permite la navegación entre componentes, cambia la URL del navegador y mantiene la interfaz sincronizada con la URL. Esta lección cubre lo esencial: qué es React Router, sus conceptos clave y buenas prácticas para usarlo en tus proyectos React.

¿Qué es React Router?

React Router es una colección de componentes de navegación que se integran de forma declarativa con tu aplicación. Permite construir aplicaciones de una sola página (SPA) con navegación sin recargar toda la página. React Router mantiene la interfaz y la URL sincronizadas, permitiendo navegación dinámica del lado del cliente.

Conceptos clave

• Enrutamiento declarativo: Define rutas como parte del árbol de componentes, haciendo la navegación predecible y mantenible.
• Enrutamiento dinámico: Las rutas pueden generarse y renderizarse según el estado o los datos de la app.
• Rutas anidadas: Organiza tu app con rutas padre e hijo para layouts complejos.
• Parámetros en la URL: Pasa datos a través de la URL para contenido dinámico.
• Rutas fallback: Maneja URLs desconocidas con una página 404 personalizada.

Buenas prácticas con React Router

• Organiza tus rutas: Usa un archivo o componente dedicado para definir rutas, especialmente en apps grandes.
• Usa <Link> y <NavLink> para navegar: Evita <a> para navegación interna y así prevenir recargas completas.
• Aprovecha rutas anidadas: Estructura tus rutas según el layout y jerarquía de tu app.
• Maneja 404 correctamente: Incluye siempre una ruta fallback para rutas no definidas.
• Utiliza parámetros de ruta para contenido dinámico: Pasa IDs o slugs en la URL para páginas de detalle.

Ejemplo: Definición y uso de rutas

A continuación, un ejemplo de cómo definir rutas básicas, fallback y enlaces de navegación.

1import React from "react";
2import { BrowserRouter, Routes, Route, Link, NavLink } from "react-router-dom";
3
4function Home() {
5  return <h2>Página de inicio</h2>;
6}
7
8function About() {
9  return <h2>Página Acerca de</h2>;
10}
11
12function NotFound() {
13  return <h2>404 - Página no encontrada</h2>;
14}
15
16function Navbar() {
17  return (
18    <nav>
19      <Link to="/">Inicio</Link>
20      <NavLink to="/about" activeclassname="active">Acerca de</NavLink>
21    </nav>
22  );
23}
24
25function App() {
26  return (
27    <BrowserRouter>
28      <Navbar />
29      <Routes>
30        <Route path="/" element={<Home />} />
31        <Route path="/about" element={<About />} />
32        <Route path="*" element={<NotFound />} />
33      </Routes>
34    </BrowserRouter>
35  );
36}
37
38export default App;

• Usa <Link> y <NavLink> para navegar entre páginas.
• La ruta path="*" captura cualquier ruta no definida y muestra un mensaje personalizado.

Navegación Programática

La navegación programática te permite cambiar de ruta en respuesta a eventos, no solo a clics en enlaces. Es útil para redirigir usuarios después de acciones como envíos de formularios o autenticación.

¿Qué es la navegación programática?

La navegación programática te permite controlar el enrutamiento en tu app usando código, normalmente con el hook useNavigate de React Router.

Buenas prácticas

• Usa navegación programática para redirigir después de acciones del usuario (por ejemplo, login, logout, envío de formularios).
• Evita abusar de las redirecciones; prefiere la navegación declarativa cuando sea posible.
• Mantén la lógica de navegación clara y fácil de seguir.

Ejemplo: Redirigir después de iniciar sesión

Así se usa useNavigate para redirigir tras enviar un formulario:

1import { useNavigate } from "react-router-dom";
2
3function LoginForm() {
4  const navigate = useNavigate();
5
6  function handleLogin(event) {
7    event.preventDefault();
8    // ...lógica de login
9    navigate("/dashboard");
10  }
11
12  return (
13    <form onSubmit={handleLogin}>
14      <button type="submit">Iniciar sesión</button>
15    </form>
16  );
17}

• useNavigate() devuelve una función para cambiar la ruta.
• Llama a navigate("/ruta") para redirigir al usuario.

Conclusión

React Router es esencial para construir aplicaciones modernas de React con múltiples páginas y navegación dinámica. Ya sea que utilices navegación declarativa con componentes Link o navegación programática con el hook useNavigate, React Router te proporciona las herramientas para crear una experiencia de usuario fluida. Organiza tus rutas, maneja URLs desconocidas con elegancia y utiliza el enfoque de navegación adecuado para cada escenario en tu aplicación.