React Router - Navegación y Rutas

El problema que resuelve

Hasta ahora tus apps de React viven en una sola pantalla. En cuanto necesitas "una página de detalle", "una sección de contacto" o simplemente que el botón atrás del navegador funcione, aparece el problema: React por sí solo no sabe nada de URLs.

Podrías resolverlo con estado (const [pantalla, setPantalla] = useState("home")) y funcionaría… hasta que un usuario quiera compartir un link, recargar la página o usar el botón atrás. Ahí se rompe: la URL nunca cambió, así que no hay nada que compartir ni a dónde volver.

React Router hace que la URL sea parte del estado de tu app. Cada vista tiene su dirección, el historial del navegador funciona, y los links se pueden copiar y compartir. Eso es lo que convierte una demo en una aplicación.

SPA: navegar sin recargar

Una SPA (Single Page Application) carga el HTML una sola vez y luego cambia el contenido con JavaScript. La diferencia con un sitio tradicional:

• Sitio multi-página: cada click pide un HTML nuevo al servidor. La pantalla parpadea y se pierde todo el estado de la app.
• SPA con Router: el click intercepta la navegación, cambia la URL sin ir al servidor y monta el componente correspondiente. Instantáneo y sin perder el estado que quieras conservar.

De ahí sale la regla más importante de esta clase, y el error que más vas a ver en código generado:

🚨 Dentro de una SPA nunca uses <a href> para navegar entre tus propias rutas. El <a> recarga la página entera: pierdes el estado, la app se reinicia y el usuario ve el parpadeo que justamente querías evitar. Para rutas internas se usa <Link>; el <a> queda reservado para enlaces externos.

El setup: tres capas

React Router se arma en tres niveles, y confundirlos es el motivo del 90% de los errores iniciales:

1. BrowserRouter — envuelve toda la app, una sola vez, en main.jsx. Es quien escucha los cambios de URL. Si lo olvidas, cualquier <Link> truena con "useNavigate() may be used only in the context of a Router".
2. Routes + Route — el mapa: qué componente corresponde a qué dirección. Routes elige una sola ruta, la que mejor coincide.
3. Link / NavLink — los disparadores de navegación dentro de tus componentes.

Los tres snippets de abajo muestran exactamente esas tres capas, en ese orden.

Link vs NavLink

Ambos navegan igual; la diferencia es que NavLink sabe si él mismo está activo:

jsx
Copiar
1<NavLink
2  to="/about"
3  className={({ isActive }) => (isActive ? "activo" : "")}
4>
5  Acerca
6</NavLink>

NavLink le pasa isActive a tu función de clase (o de estilo) para que marques visualmente la sección actual. Úsalo en la navbar; para el resto de los enlaces, Link basta y es más simple.

Layouts con Outlet

Si tu navbar y tu footer se repiten en todas las páginas, no los copies en cada componente. Se declara un layout que contiene lo común y un hueco donde React Router inyecta la ruta hija:

jsx
Copiar
1function Layout() {
2  return (
3    <>
4      <Navbar />
5      <main>
6        <Outlet />   {/* aquí se monta la ruta hija */}
7      </main>
8      <Footer />
9    </>
10  );
11}
12
13<Routes>
14  <Route path="/" element={<Layout />}>
15    <Route index element={<Home />} />
16    <Route path="about" element={<About />} />
17  </Route>
18</Routes>

Dos detalles que confunden al principio: las rutas hijas se escriben sin la barra inicial (about, no /about, porque se concatenan al padre), y index es la que se muestra cuando la URL coincide exactamente con el padre.

Errores comunes

En tu proyecto integrador

Este es el momento en que tu proyecto deja de ser una pantalla y se vuelve una app. Antes de la siguiente sesión, define qué rutas necesita: normalmente una lista, un detalle, y una o dos secciones fijas. Ese mapa de rutas es lo que vas a defender.