` element that each route fills. ### Rendering routes from a single `navigate` listener One listener sees link clicks, form submissions, `navigation.navigate()` calls, and back or forward traversals. Return early for anything the router should not own: cross-origin destinations, fragment-only changes, and downloads. The URL has already changed by the time `handler()` runs, so render a placeholder first and swap the fetched content in afterwards. ```js navigation.addEventListener("navigate", (event) => { if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) { return; } const url = new URL(event.destination.url); event.intercept({ async handler() { const view = document.querySelector("#view"); view.setAttribute("aria-busy", "true"); const response = await fetch(`/fragments${url.pathname}`, { signal: event.signal }); view.innerHTML = await response.text(); view.removeAttribute("aria-busy"); }, }); }); ``` Passing `event.signal` to `fetch()` cancels the request when the user navigates again before it finishes; without it the late response would overwrite the newer route. ### Falling back to the History API when `intercept()` is missing `window.navigation` alone is not enough to detect a usable implementation: Chrome 102 to 104 expose `navigation` without `intercept()`, so a listener written for `intercept()` would throw a `TypeError` on the first click there. Check the method on the prototype and otherwise wire the classic `click` plus `popstate` pair. ```js const hasNavigationApi = "navigation" in window && typeof NavigateEvent !== "undefined" && typeof NavigateEvent.prototype.intercept === "function"; async function render(pathname) { const response = await fetch(`/fragments${pathname}`); document.querySelector("#view").innerHTML = await response.text(); } if (hasNavigationApi) { navigation.addEventListener("navigate", (event) => { if (!event.canIntercept || event.hashChange || event.downloadRequest !== null) return; const { pathname } = new URL(event.destination.url); event.intercept({ handler: () => render(pathname) }); }); } else { document.addEventListener("click", (event) => { const link = event.target.closest("a[href]"); if (!link || link.origin !== location.origin || event.button !== 0 || event.metaKey || event.ctrlKey) return; event.preventDefault(); history.pushState(null, "", link.href); render(link.pathname); }); window.addEventListener("popstate", () => render(location.pathname)); } ``` The fallback misses what the Navigation API gives for free: form submissions, `location.assign()` calls, and traversals that land on a different document all bypass the `click` listener and reload the page. ### Going back to a known entry with `traverseTo()` and stored state `navigation.entries()` returns every same-origin entry with a `key` that survives reloads, which lets a wizard return to its first step without knowing how many steps were pushed in between. Store the step in `state` when navigating so the destination can restore its form. ```js const startKey = navigation.currentEntry.key; async function goToStep(step) { const { finished } = navigation.navigate(`/checkout/${step}`, { state: { step, startedAt: Date.now() }, }); await finished; } function restart() { if (!navigation.entries().some((entry) => entry.key === startKey)) { navigation.navigate("/checkout/1", { history: "replace" }); return; } navigation.traverseTo(startKey); } navigation.addEventListener("currententrychange", () => { const state = navigation.currentEntry.getState(); if (state?.step) document.querySelector("#step").textContent = String(state.step); }); ``` If the user has since navigated to another origin and back, `startKey` is no longer in `entries()` and `traverseTo()` would reject with `InvalidStateError`; the `some()` check keeps `restart()` on the replace path instead. ## See also - [View Transitions](/reference/performance/view-transitions/), the animation layer most Navigation API routers pair with `intercept()` - [Back/forward cache (bfcache)](/reference/performance/bfcache/), which decides whether a cross-document traversal restores the old document - [Speculation Rules API](/reference/performance/speculation-rules/), prefetching the routes a `navigate` handler is about to request - [HTML Standard: the navigation API](https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-api) (html.spec.whatwg.org) - [HTML Standard: navigate() method](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-navigation-navigate) (html.spec.whatwg.org) - [Modern client-side routing: the Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api/) (developer.chrome.com) - [WICG navigation-api explainer](https://github.com/WICG/navigation-api) (github.com) - [Chromium bug 439994590: javascript: URLs accepted by navigate()](https://crbug.com/439994590) (crbug.com)