React Router: rutas, Link y navegación

React Router es el estándar para enrutar apps de React (fuera de un framework como Next.js). Convierte el mini-router que hiciste a mano en algo declarativo y robusto: declaras "esta URL muestra este componente" con <Routes> y <Route>, y navegas con <Link> en vez de <a> para no recargar. Hoy dominas lo esencial: definir rutas, enlazar entre ellas y navegar por código.

Declarar el mapa de la app

Rutas: la configuración básica

Envuelves la app en <BrowserRouter>, y dentro declaras las rutas: cada <Route> asocia un path con el element que se muestra cuando la URL coincide:

import { BrowserRouter, Routes, Route } from "react-router-dom";

export default function App() {
return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Inicio />} />
      <Route path="/gastos" element={<Gastos />} />
      <Route path="/perfil" element={<Perfil />} />
      {/* comodín: cualquier ruta no encontrada muestra el 404 */}
      <Route path="*" element={<NoEncontrado />} />
    </Routes>
  </BrowserRouter>
);
}

<BrowserRouter> conecta con la History API (la de la lección anterior) por ti. <Routes> mira la URL actual y renderiza el element del <Route> cuyo path coincide —solo uno, el que mejor encaja—. El path="*" es el comodín para el 404: coincide con cualquier ruta que no matchee las anteriores. Declaras el mapa; el router muestra la vista correcta según la URL.

Navegar sin recargar: Link y NavLink

Para navegar NUNCA usas <a href> (eso recarga la página y mata la SPA). Usas <Link>, que cambia la ruta con la History API:

import { Link, NavLink } from "react-router-dom";

function Menu() {
return (
  <nav>
    {/* Link: navega sin recargar */}
    <Link to="/">Inicio</Link>
    <Link to="/gastos">Gastos</Link>

    {/* NavLink: como Link, pero sabe si SU ruta está activa (para resaltarla) */}
    <NavLink
      to="/perfil"
      className={({ isActive }) => (isActive ? "activo" : "")}
    >
      Perfil
    </NavLink>
  </nav>
);
}

<Link to="/gastos"> renderiza un <a> por debajo (accesible, clic derecho para abrir en pestaña nueva funciona) pero intercepta el clic para navegar sin recargar. <NavLink> es un <Link> que además sabe si su destino es la ruta ACTUAL —recibes isActive para aplicarle un estilo de "estás aquí"—, ideal para menús. Regla de oro: dentro de una app con router, enlaces internos con <Link>/<NavLink>; <a href> solo para enlaces EXTERNOS.

Navegar por código: useNavigate

A veces navegas sin un clic en un enlace: tras enviar un formulario, tras loguearse, tras un timeout. Para eso está useNavigate:

import { useNavigate } from "react-router-dom";

function FormularioGasto() {
const navegar = useNavigate();

async function guardar() {
  await api.crearGasto(datos);
  navegar("/gastos");        // redirige tras guardar
  // navegar(-1) iría "atrás", como el botón del navegador
}

return <button onClick={guardar}>Guardar</button>;
}

useNavigate te da una función para navegar imperativamente: navegar("/gastos") va a una ruta, navegar(-1) retrocede una posición en el historial (como el botón atrás). Úsalo para navegación que ocurre por LÓGICA (después de una acción), no por un clic directo del usuario en un enlace —para eso está <Link>—. La distinción es la misma que viste en efectos: acción del usuario en un enlace → <Link>; navegación como consecuencia de lógica → useNavigate.

Mini-reto

En un proyecto con React Router instalado (o razonando la API): 1) declara tres rutas (/, /gastos, /perfil) y un comodín * para el 404; 2) haz un menú con <NavLink> que resalte la ruta activa; 3) en un botón "Cerrar sesión", usa useNavigate para redirigir a / por código. Explica por qué el menú usa <NavLink> y el botón usa useNavigate en vez de un <Link>.

Qué sigue

Ya navegas entre rutas fijas. Pero las apps reales tienen rutas DINÁMICAS: /gastos/5, /gastos/12 —una misma vista para muchos ids—. La próxima lección trae los parámetros de URL (useParams) y las query strings (useSearchParams): cómo tu componente lee la parte variable de la dirección.