React Router: Rutas Básicas

En sitios web tradicionales, cada URL lleva a un archivo HTML diferente que el servidor envía. React es una Single Page Application (SPA): solo hay un archivo HTML y JavaScript intercepta la navegación para mostrar diferentes componentes según la URL, sin recargar la página. React Router es la librería que maneja esa interceptación.

BrowserRouter escucha cambios en la URL, Routes decide qué componente mostrar según la ruta, y Route conecta cada path con su componente correspondiente.

La diferencia entre Link y una etiqueta <a> clásica es clave: <a href="/ruta"> descarga el HTML completo del servidor y recarga toda la app. <Link to="/ruta"> cambia la URL en el historial del navegador y React renderiza el componente correcto en milisegundos, sin ninguna recarga. Esto hace las navegaciones instantáneas.

NavLink es idéntico a Link pero añade automáticamente una clase CSS cuando la ruta está activa, perfecto para resaltar el ítem del menú de navegación que corresponde a la página actual.

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

// Componentes de página
function Inicio() { return <h1>Inicio</h1>; }
function Sobre() { return <h1>Sobre Nosotros</h1>; }
function Contacto() { return <h1>Contacto</h1>; }
function NoEncontrado() { return <h1>404 - Página no encontrada</h1>; }

// App con Router
function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* Link no recarga la página */}
        <Link to="/">Inicio</Link>
        <Link to="/sobre">Sobre</Link>

        {/* NavLink agrega clase "active" automáticamente */}
        <NavLink
          to="/contacto"
          className={({ isActive }) => isActive ? "activo" : ""}
        >
          Contacto
        </NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/sobre" element={<Sobre />} />
        <Route path="/contacto" element={<Contacto />} />
        <Route path="*" element={<NoEncontrado />} />
      </Routes>
    </BrowserRouter>
  );
}