useNavigate

useNavigate() devuelve una función para cambiar de ruta desde lógica imperativa (botones, handlers, efectos, etc.).

(to: string, options?: { replace?: boolean; state?: unknown }) => void

Parámetros

Parámetro	Tipo	Qué hace
to	string	Ruta interna destino (/dashboard, /users/42, /search?q=cat#top)
options	NavigateOptions	Configuración opcional de la navegación

options.replace

• false o undefined (por defecto): usa history.pushState (agrega una entrada al historial).
• true: usa history.replaceState (reemplaza la entrada actual).

Úselo cuando no quiere que la ruta anterior quede en el historial, por ejemplo después de login/logout.

options.state

Permite asociar datos a la entrada del historial actual.

• Tipo: unknown
• Se almacena en el history state del navegador.
• Es útil para pasar metadatos de navegación (ej. source, fromModal, tracking).

Nota: Michi Router no expone un hook propio para leer ese estado; puede consultarlo con window.history.state si su caso lo requiere.

Ejemplos prácticos

import { useNavigate } from '@arielgonzaguer/michi-router/core';

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

  return (
    <>
      <button onClick={() => navigate('/profile')}>Perfil</button>
      <button onClick={() => navigate('/login', { replace: true })}>Salir</button>
      <button onClick={() => navigate('/search?q=michi#top', { state: { source: 'hero' } })}>
        Buscar
      </button>
    </>
  );
}

Cuándo usar replace: true

// Caso típico: login exitoso
await signIn(email, password);
navigate('/dashboard', { replace: true });

Con esto, al presionar “atrás”, no vuelve al formulario de login.

Cuándo usar state

navigate('/checkout', { state: { source: 'cart', couponApplied: true } });

Puede usar ese estado para analytics o UX condicional.

Errores comunes

1. Navegar a URL externa con navigate('https://...') (se bloquea por seguridad).
2. Usar navigate para enlaces visuales simples en JSX (use Link para navegación declarativa).
3. Esperar que replace conserve la entrada anterior (justamente la reemplaza).

Seguridad

• Solo acepta navegación interna válida.
• URLs externas o protocolos inseguros se bloquean.