¿Cómo navegar entre páginas con React Router?

React Router es la librería estándar para manejar la navegación entre vistas en una aplicación React de una sola página (SPA).

Sin React Router, tu aplicación solo muestra una pantalla. Con él, puedes tener rutas como /inicio, /productos y /contacto sin recargar el navegador.

¿Qué es una SPA y por qué necesita un router?

Una SPA (Single Page Application) carga un solo archivo HTML al inicio. Después, React actualiza el contenido de la pantalla sin hacer peticiones nuevas al servidor.

El problema: el navegador no sabe cómo cambiar de "página" por sí solo. React Router resuelve eso interceptando los cambios de URL y mostrando el componente correcto.

Imagina una tienda como Liverpool. Cuando pasas de /mujeres a /hombres, la página no se recarga. Solo cambia el contenido. Eso es React Router en acción.

Instalación de React Router

Primero, instala la librería desde la terminal:

npm install react-router-dom

Esta es la versión para navegadores. Existe también react-router-native para apps móviles, pero en esta lección usamos la versión web.

Verifica que se agregó a tu package.json bajo dependencies:

"react-router-dom": "^6.x.x"

Estructura básica de React Router

React Router v6 usa tres piezas principales:

La estructura base siempre sigue este patrón:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
    </BrowserRouter>
  );
}

path define la URL. element define qué componente se renderiza.

Ejemplo 1: Tienda sencilla con tres vistas

Imagina una mini tienda inspirada en Bimbo. Tiene tres páginas: Inicio, Productos y Contacto.

Primero, crea los tres componentes:

function Inicio() {
  return <h2>Bienvenido a Bimbo Tienda</h2>;
}

function Productos() {
  return <h2>Nuestros productos: Pan Blanco, Marinela, Ricolino</h2>;
}

function Contacto() {
  return <h2>Escríbenos a contacto@bimbo.com.mx</h2>;
}

Ahora conecta todo en App.jsx:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> |
        <Link to="/productos">Productos</Link> |
        <Link to="/contacto">Contacto</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
    </BrowserRouter>
  );
}

El <nav> con <Link> aparece en todas las páginas. Las rutas cambian solo el contenido de abajo.

Ejemplo 2: Ruta dinámica con parámetro

Una ruta dinámica usa :parametro en el path. Sirve para mostrar un producto específico según su ID.

Imagina que Mercado Libre quiere mostrar el detalle de cada artículo:

import { useParams } from 'react-router-dom';

function DetalleProducto() {
  const { id } = useParams();
  return <h2>Mostrando producto con ID: {id}</h2>;
}

Define la ruta con el parámetro dinámico:

<Route path="/producto/:id" element={<DetalleProducto />} />

Cuando el usuario visita /producto/42, el hook useParams() devuelve { id: "42" }. Puedes usar ese ID para hacer una llamada a tu API y cargar los datos del producto.

Ejemplo 3: NavLink con estilo activo

NavLink es ideal para menús de navegación. Agrega automáticamente la clase active al enlace de la página actual.

import { NavLink } from 'react-router-dom';

function Menu() {
  const estiloActivo = ({ isActive }) => ({
    fontWeight: isActive ? 'bold' : 'normal',
    color: isActive ? '#e91e63' : '#333',
  });

  return (
    <nav>
      <NavLink to="/" style={estiloActivo}>Inicio</NavLink>
      <NavLink to="/productos" style={estiloActivo}>Productos</NavLink>
      <NavLink to="/contacto" style={estiloActivo}>Contacto</NavLink>
    </nav>
  );
}

Cuando estás en /productos, ese enlace se muestra en negritas y color rosa. Los demás se ven grises. No necesitas escribir lógica extra.

Página 404: Ruta no encontrada

Siempre agrega una ruta para URLs que no existen. Usa path="*" al final de tu lista de rutas:

function NoEncontrado() {
  return <h2>404 – Esta página no existe</h2>;
}

// Dentro de <Routes>:
<Route path="*" element={<NoEncontrado />} />

El * captura cualquier URL que no coincida con las rutas anteriores. Siempre debe ser la última ruta de la lista.

Navegación programática con useNavigate

A veces necesitas redirigir al usuario desde código, no desde un clic en un enlace. Por ejemplo, después de enviar un formulario de login.

Usa el hook useNavigate:

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

function FormularioLogin() {
  const navigate = useNavigate();

  function manejarEnvio(e) {
    e.preventDefault();
    // lógica de autenticación...
    navigate('/dashboard');
  }

  return (
    <form onSubmit={manejarEnvio}>
      <button type="submit">Entrar</button>
    </form>
  );
}

Después de que el usuario hace clic en "Entrar", la app lo lleva a /dashboard sin recargar la página. Esto es común en sistemas internos de empresas como FEMSA o en portales del SAT.

Errores comunes

Error 1: Usar <a href> en lugar de <Link>

El tag <a> recarga toda la página. Eso destruye el estado de React y hace lenta la navegación.

// ❌ Incorrecto
<a href="/productos">Productos</a>

// ✅ Correcto
<Link to="/productos">Productos</Link>

Usa <Link> o <NavLink> siempre dentro de una SPA.

Error 2: Olvidar envolver la app en <BrowserRouter>

Si usas <Link> o <Routes> sin un <BrowserRouter> como ancestro, React lanza un error:

Error: useHref() may be used only in the context of a <Router> component.

Asegúrate de que <BrowserRouter> esté en el nivel más alto, normalmente en main.jsx o index.jsx.

Error 3: Poner <Route> fuera de <Routes>

En React Router v6, cada <Route> debe estar dentro de <Routes>. En versiones anteriores (v5) esto no era obligatorio, pero en v6 sí.

// ❌ Incorrecto en v6
<Route path="/" element={<Inicio />} />

// ✅ Correcto
<Routes>
  <Route path="/" element={<Inicio />} />
</Routes>

Error 4: Confundir path="/" con path="*"

path="/" solo coincide con la URL raíz. path="*" coincide con todo lo que no se haya definido antes. No los intercambies.

Referencia rápida de componentes y hooks

Lo que debes recordar

React Router convierte tu app de una sola pantalla en una experiencia con múltiples vistas. Con los componentes <BrowserRouter>, <Routes> y <Route> defines la estructura. Con <Link> y <NavLink> creas la navegación. Con useParams y useNavigate manejas casos avanzados desde el código.