La Navigation API en navegadores modernos

La Navigation API es un reemplazo más moderno y potente de la History API. Trata las navegaciones como objetos de primera clase que puede interceptar, cancelar y esperar con await, lo que se acerca más a la forma en que las SPA necesitan gestionar el enrutamiento en 2024.

window.navigation expone la lista de entradas, la entrada actual y el evento navigate. navigation.entries() devuelve todas las entradas del historial actual; navigation.currentEntry es la entrada activa. Compárelo con la longitud opaca y el estado no legible de la History API.

Escuche navigation.addEventListener("navigate", handler) para interceptar cualquier navegación del mismo documento: clics en enlaces, envíos de formularios, navegación hacia atrás o hacia delante y navegación programática. Un único punto de enganche sustituye la combinación de interceptación de clics + popstate + listeners de envío de formularios.

Llamar a e.intercept({ handler }) se apropia de la navegación. El handler devuelve una promesa; mientras está pendiente, la navegación está «en curso» y la URL ya se ha actualizado. Esto unifica la condición de carrera tradicional entre el cambio de URL y el renderizado de la vista.

No todas las navegaciones se pueden interceptar (las de otro origen y las descargas, por ejemplo). Compruebe e.canIntercept antes de llamar a intercept. Esta protección defensiva de una sola línea distingue la navegación de una SPA de una salida real hacia otro origen.

navigation.navigate(url, options) activa una navegación mediante programación, de forma equivalente a un clic. El objeto devuelto contiene las promesas committed y finished, por lo que puede esperar al cambio de URL o a que finalice por completo el handler.

Cada entrada de navegación tiene una key estable (incluso después de actualizar la página) y un id válido durante la sesión. Use la clave para el estado persistente (posiciones de desplazamiento guardadas, borradores de formularios) y el id para el estado transitorio. El único estado de la History API era un bloque opaco.

navigation.back() y navigation.forward() son métodos auxiliares que envuelven traverseTo. Devuelven el mismo par de promesas { committed, finished }, por lo que puede esperar a que termine la navegación hacia atrás antes de realizar tareas posteriores.

Si el usuario hace clic en un segundo enlace mientras el primero todavía se está renderizando, la navegación en curso puede cancelarse. El controlador recibe un AbortSignal mediante e.signal; páselo a las llamadas a fetch para que el trabajo obsoleto se cancele cuando comience la nueva navegación.

La History API funciona, pero resulta poco práctica: los cambios de estado y el renderizado de la vista están desacoplados, la gestión de clics es manual, la coordinación entre varios listeners es frágil y la restauración del desplazamiento es incompleta. La Navigation API se diseñó desde el principio para las necesidades de las SPA y resuelve cada uno de estos problemas.

Chrome y Edge son compatibles con la Navigation API. Safari y Firefox van rezagados (a principios de 2026); publique código que detecte la funcionalidad ("navigation" in window) y recurra a History + popstate cuando no esté disponible. Frameworks como SvelteKit y TanStack Router ya encapsulan esta detección.

Para proyectos nuevos dirigidos principalmente a usuarios de Chromium, adóptela ahora y acepte la alternativa basada en History. Para sitios públicos destinados a una audiencia amplia, espere a que Safari y Firefox sean compatibles (o utilice una biblioteca de enrutamiento que abstraiga ambas opciones). La sencillez de esta API justifica la espera.

¿Cuál es la principal ventaja del evento navigate de la Navigation API frente a la combinación de popstate e interceptación manual de clics de la History API?

La Navigation API unifica la navegación de las SPA mediante un único evento navigate, con semántica de interceptación y cancelación, claves estables por entrada y espera de controladores asíncronos. Sustituye el conjunto de soluciones parciales formado por History, popstate e interceptación de clics. Actualmente es compatible con los navegadores basados en Chromium; utilice la detección de funcionalidades y recurra a History para el código multidispositivo hasta que Safari y Firefox se pongan al día.