Navegación programática redirección

Navegación programática con useNavigate

En React Router v6, useNavigate es un hook que se utiliza para realizar navegación programática dentro de una aplicación React. Este hook reemplaza al método useHistory utilizado en versiones anteriores de React Router. Proporciona una forma sencilla y directa para navegar a diferentes rutas desde el código, sin necesidad de interacción del usuario.

Para utilizar useNavigate, primero hay que importarlo desde react-router-dom:

// BotonNavegacion.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacion() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>
      Navegar a Ruta Destino
    </button>
  );
}

En este ejemplo, cuando el usuario hace clic en el botón, la aplicación navega programáticamente a la ruta /about.

useNavigate también permite pasar estado a la ruta destino. Esto puede ser útil para pasar información adicional que no se desea incluir en la URL:

// BotonNavegacionConEstado.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacionConEstado() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/ruta-destino', { state: { userId: 123 } });
  };

  return (
    <button onClick={handleClick}>
      Navegar con Estado
    </button>
  );
}

En la ruta destino, se puede acceder al estado pasado mediante el hook useLocation:

// About.jsx
import { useLocation } from "react-router-dom";

export default function About() {
  const location = useLocation();
  const { userId } = location.state || {};

  return (
    <div>
      <h1>About Page</h1>
      <p>ID de Usuario: {userId}</p>
    </div>
  )
}

useNavigate también soporta la navegación hacia atrás y hacia adelante en el historial del navegador:

// BotonesNavegacionHistorial.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonesNavegacionHistorial() {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1); // Navegar hacia atrás
  };

  const handleForward = () => {
    navigate(1); // Navegar hacia adelante
  };

  return (
    <div>
      <button onClick={handleBack}>
        Atrás
      </button>
      <button onClick={handleForward}>
        Adelante
      </button>
    </div>
  );
}

Redirecciones condicionales

En React Router v6, las redirecciones condicionales se pueden implementar de manera eficiente utilizando hooks como useNavigate y componentes como <Navigate>. Este enfoque permite redirigir a los usuarios a diferentes rutas basadas en ciertas condiciones lógicas, mejorando la experiencia del usuario y la seguridad de la aplicación.

Para realizar una redirección condicional, primero se debe importar useNavigate desde react-router-dom. Este hook permite la navegación programática en función de condiciones específicas. Un caso típico es redirigir a los usuarios no autenticados a una página de inicio de sesión.

// BotonAccesoCondicional.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonAccesoCondicional({ userIsLoggedIn }) {
  const navigate = useNavigate();

  const handleNavigation = () => {
    if (!userIsLoggedIn) {
      navigate('/login');
    } else {
      navigate('/dashboard');
    }
  };

  return (
    <button onClick={handleNavigation}>
      Ir a Dashboard o Login
    </button>
  );
}

En este ejemplo, handleNavigation comprueba si el usuario está autenticado (userIsLoggedIn). Si no lo está, navega a la ruta /login; de lo contrario, navega a /dashboard.

Otra forma de realizar redirecciones condicionales es utilizando el componente <Navigate> dentro de la estructura de componentes JSX. Este método es útil cuando se necesita realizar una redirección como parte del renderizado del componente.

// ProtectedRoute.jsx
import { Navigate } from 'react-router-dom';

export default function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return children;
}

En este ejemplo, el componente ProtectedRoute verifica si el usuario está autenticado. Si no lo está, el componente <Navigate> redirige automáticamente al usuario a la ruta /login, bloqueando el acceso a las rutas protegidas. Si el usuario está autenticado, el componente simplemente renderiza los children, permitiendo el acceso al contenido protegido.

Las redirecciones condicionales también pueden basarse en datos de la aplicación, como roles de usuario o permisos.

Ejemplo de como se redirige a los usuarios según su rol.

// BotonNavegacionPorRol.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacionPorRol({ userRole }) {
  const navigate = useNavigate();

  const handleNavigation = () => {
    if (userRole === 'admin') {
      navigate('/admin-dashboard');
    } else if (userRole === 'user') {
      navigate('/user-dashboard');
    } else {
      navigate('/login');
    }
  };

  return (
    <button onClick={handleNavigation}>
      Navegar según el Rol
    </button>
  );
}

En este código, handleNavigation verifica el rol del usuario (userRole) y navega a diferentes rutas basándose en ese valor. Si el rol es 'admin', navega a /admin-dashboard; si es 'user', navega a /user-dashboard; de lo contrario, navega a /login.

Caso B2B: navegación contextual en backoffices y portales

En entidades bancarias con backoffices que distinguen entre operadores, supervisores y auditores, el patrón <ProtectedRoute> con redirecciones por rol estructura toda la aplicación. Vuestro equipo declara una jerarquía donde el operador accede a /operaciones, el supervisor a /operaciones y /aprobaciones, y el auditor solo a /auditoria. Cualquier intento de acceder a una ruta no autorizada redirige automáticamente al dashboard correspondiente al rol. La organización gana en consistencia y reduce el riesgo de exposición accidental de funcionalidad sensible.

En administraciones públicas con sedes electrónicas, tras un trámite completado, useNavigate('/justificante', { state: { numeroExpediente, fechaPresentacion } }) lleva al usuario al justificante de presentación con los datos contextuales en state para evitar exponer la información en la URL. Vuestra organización gana cumplimiento RGPD al no incluir datos personales en parámetros de query.

En telco con portales B2B, tras seleccionar un cliente desde el buscador, navigate('/cliente/' + id, { replace: true }) reemplaza la entrada del historial para que el botón "atrás" del navegador devuelva al buscador, no a la pantalla anterior dentro del cliente. La UX mejora notablemente.

En retail con e-commerce headless, los flujos de checkout usan <Navigate> declarativo cuando el carrito está vacío (if (cart.items.length === 0) return <Navigate to="/" />). Esto previene que un usuario vuelva a /checkout mediante el historial sin tener productos seleccionados.

Versiones (2025)

React Router v7 (octubre 2024) unifica React Router DOM y Remix bajo una sola API. La API de useNavigate y <Navigate> se mantiene compatible con v6, pero v7 introduce data routes con loaders y actions como API recomendada. Para nuevo código en 2025, considerad la API de data routes (createBrowserRouter).

React 19 (diciembre 2024) introduce el hook useActionState y el formulario con action, que pueden cambiar patrones de navegación post-submit. La integración con React Router 7 simplifica los flujos de formulario + redirección.

Alternativas relevantes en 2025:

• TanStack Router (alternativa con tipado más fuerte y type-safe routes).
• Next.js App Router (con useRouter y redirect()) si vuestro proyecto migra a Next.js para SSR.

Anti-patrones y pitfalls

navigate dentro de useEffect sin condición de salida. Si la condición sigue siendo true tras la navegación, el componente entra en bucle infinito. Comprobad con flags o dependencies array.

Pasar objetos no serializables en state. navigate(..., { state: { funcion: () => {} } }) falla porque el state se serializa con structuredClone. Pasad solo datos serializables.

Confiar en state como único mecanismo de seguridad. El usuario puede manipular el historial. Para datos sensibles, valida en el destino consultando el backend.

<Navigate> con replace={false} por defecto en redirecciones de error. Sin replace, el botón "atrás" devuelve a la ruta protegida, que vuelve a redirigir, generando bucles. Usad <Navigate to="/login" replace /> en redirecciones por error.

Mezclar useNavigate y <Link> sin coherencia. <Link> es preferible para enlaces normales (accesibilidad, SEO, click-medio para abrir en nueva pestaña). Usad useNavigate solo para navegación tras evento que no es un click directo (post-submit, redirección por timer, navegación por teclado custom).

No comprobar si el componente está montado al navegar tras async. Si una promesa resuelve después de desmontar el componente, el navigate puede provocar warnings o ejecutarse en estado obsoleto.

Comparativa con alternativas

Frente a window.location.href = '/ruta', useNavigate mantiene el estado de la SPA sin recargar. window.location solo tiene sentido para navegación a otro dominio o tras logout completo.

Frente a Next.js router.push, las APIs son similares. Next.js gestiona también routing del lado servidor; React Router en SPA pura.

Frente a TanStack Router, ofrece type-safe routes (los parámetros de URL están tipados estrictamente), lo cual elimina una clase de bugs en proyectos grandes B2B. Para nuevo código con foco en mantenibilidad a largo plazo, conviene evaluar.

Frente a Remix loaders y actions, ofrecen un modelo distinto basado en data fetching antes de la navegación. React Router 7 unifica ambos.

Documentación oficial

La referencia es reactrouter.com/en/main/hooks/use-navigate y reactrouter.com/en/main/components/navigate. Para v7 con data routes, reactrouter.com/en/main/start/overview. Para patrones de protección de rutas, el blog oficial publicó "Authentication Patterns in React Router v7" en 2024.

La navegación programática es la base de cualquier flujo no trivial en aplicaciones React. Para vuestro equipo en proyectos B2B, dominarla con React Router 7 (o TanStack Router) permite construir UX consistente y rutas seguras integradas con el sistema de autenticación corporativo.