Herramientas HTML

Gratis Generador de snippets Navigation API Router

Genere snippets de enrutamiento JavaScript con la API Navigation para SPAs, sin History API.

Cargando herramienta...

Qué es Generador de snippets Navigation API Router?

La API Navigation es una API moderna del navegador que intercepta navegaciones a través de un handler navigation.addEventListener('navigate', ...). A diferencia de la History API, que solo dispara un evento popstate en la navegación hacia atrás/adelante, la Navigation API captura todos los tipos de navegación, incluyendo clics en enlaces, envíos de formularios, navegación programática y navegación hacia atrás/adelante. Se integra con la View Transition API para cambios de página animados y proporciona restauración de desplazamiento y gestión del ciclo de vida de navegación incorporados.

Respuesta rápida

Genere fragmentos de JavaScript para enrutamiento del lado del cliente usando la Navigation API. Configure patrones de ruta con URLPattern, opciones de intercepción para clics en enlaces y navegación del navegador, integración con view transition para cambios de página animados y comportamiento de restauración de desplazamiento. La Navigation API (Chrome 102+, Safari 16.4+, Firefox 131+) reemplaza la History API con un evento navigate unificado, AbortSignal para cancelación y soporte incorporado de view transition.

Last updated: 2026-05-31

Limitaciones

La Navigation API aún no es compatible con todos los navegadores. Chrome 102+, Edge 102+, Safari 16.4+ y Firefox 131+ la soportan. Los navegadores antiguos requieren un respaldo a la History API o navegación del lado del servidor.
La integración de view transition requiere tanto la Navigation API como la View Transition API. Las view transitions entre documentos son una característica más reciente dentro de la View Transition API y tienen requisitos de navegador adicionales más allá de la línea base de la Navigation API.
La Navigation API no maneja preocupaciones a nivel de aplicación como carga diferida, división de código o almacenamiento en caché de datos. Estos deben implementarse por separado en los handlers de ruta.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

Defina patrones de ruta usando objetos URLPattern o comparadores de ruta simples. Cada ruta puede tener una función handler que obtiene contenido y actualiza el DOM.
Configure las opciones de intercepción de navegación: interceptar todas las navegaciones, solo navegaciones del mismo origen o tipos específicos (push, replace, reload, traverse).
Active la integración con view transition para animar entre estados de página usando document.startViewTransition dentro del handler navigate.
Seleccione el comportamiento de restauración de desplazamiento: restaurar automáticamente a la posición anterior, desplazarse al inicio en cada navegación o destinos de desplazamiento personalizados por ruta.

Para qué puedes usarla

Construir un enrutador de aplicación de una sola página con soporte adecuado de navegación hacia atrás/adelante y sin condiciones de competencia entre solicitudes de navegación concurrentes.
Crear una aplicación de múltiples páginas con navegación del lado del cliente mejorada progresivamente que degradece a cargas completas de página en navegadores no compatibles.
Implementar transiciones de página animadas entre vistas usando la View Transition API dentro del handler navigate de la Navigation API.

Casos de uso

Ejemplos prácticos

Ejemplo

SPA con patrones de ruta y view transitions

Un sitio de documentación desea navegación del lado del cliente con transiciones animadas entre páginas. Use la Navigation API para interceptar clics en enlaces, hacer coincidir URLPatterns para cada sección, llamar a fetch() para cargar contenido, envolver la actualización del DOM en document.startViewTransition para animaciones de transición y llamar a navigation.updateCurrentEntry({ state }) para preservar el estado de búsqueda/filtro por ruta.

Ejemplo

Aplicación multipágina con mejora progresiva

Un sitio de contenido desea navegación más rápida sin reconstruir como SPA completo. Genere código que intercepte navegaciones del mismo origen mediante navigation.addEventListener('navigate', ...), cancele el fetch actual si comienza una nueva navegación (evitando condiciones de competencia), actualice el área de contenido principal y recurra a cargas completas de página cuando JavaScript esté deshabilitado o la Navigation API no esté disponible.

Errores comunes

No llamar a event.preventDefault() antes de llamar a event.intercept(): el evento navigate debe interceptarse sincrónicamente para evitar que el navegador inicie su propia navegación. Llame siempre a preventDefault() e intercept() en el handler.
Ignorar el controlador de aborto event.signal: la Navigation API proporciona un AbortSignal en cada evento navigate. Las operaciones fetch de larga duración deben escuchar event.signal para cancelar solicitudes obsoletas cuando comienza una nueva navegación, evitando condiciones de competencia.
Olvidar manejar las navegaciones de tipo traversal: las navegaciones hacia atrás/adelante disparan un evento navigate con navigationType 'traverse'. Las rutas deben distinguir entre push/replace y traverse para restaurar la posición de desplazamiento correctamente y evitar volver a obtener contenido en caché.

Verificación

Abra la consola del navegador y navegue entre rutas usando clics en enlaces. Verifique que cada evento navigate se dispare con el navigationType correcto (push, replace, traverse) y que el DOM se actualice sin una recarga completa de la página.
Abra la pestaña Network, inicie una navegación de ruta y navegue rápidamente a otra ruta. Verifique que la primera solicitud se cancele mediante el AbortSignal comprobando si hay una solicitud HTTP abortada o cancelada en la pestaña Network.

FAQ

Preguntas sobre Generador de snippets Navigation API Router

¿En qué se diferencia la Navigation API de la History API para el enrutamiento SPA?

La History API solo dispara un evento popstate en la navegación hacia atrás/adelante. Los clics en enlaces, pushState/replaceState programáticos y recargas no se capturan: debe interceptar manualmente todos estos caminos. La Navigation API dispara un único evento navigate para cada tipo de navegación (push, replace, reload, traverse), además proporciona un AbortSignal para cancelación, un evento FocusChanged para accesibilidad y soporte incorporado de view transition y restauración de desplazamiento.

¿Se puede polyfill la Navigation API para navegadores antiguos?

No existe un polyfill completo para la Navigation API porque requiere una integración profunda del navegador con el motor de navegación. Para navegadores que no la soportan (Chrome < 102, Safari < 16.4, Firefox < 131), su SPA debe recurrir a la History API con intercepción manual de clics en enlaces, o recurrir a la navegación completa del lado del servidor. Los fragmentos generados incluyen una guarda de detección de características para este propósito.

¿Cómo funcionan las view transitions con la Navigation API?

Dentro del handler del evento navigate, después de llamar a event.intercept(), envuelva su código de actualización del DOM en document.startViewTransition(() => { ... }). El navegador captura los estados de página antiguo y nuevo, crea una animación de transición entre ellos y actualiza el DOM dentro del callback de transición. La opción viewTransition de intercept() puede opcionalmente manejar esta integración automáticamente en navegadores compatibles.

Herramientas relacionadas