demo · v141
precommit Handler
Click a route to trigger a Navigation API intercept. The precommit handler simulates async work (data fetch / hydration prep) before the URL flips; the commit handler then swaps the DOM. Adjust the latency to see the deferred-commit window with your own eyes.
500 ms
probing precommitHandler…
the call
navigation.addEventListener("navigate", (event) => {
if (!shouldIntercept(event)) return;
event.intercept({
async precommitHandler({ redirect, commit }) {
// run async work BEFORE the URL flips:
const data = await fetchData(event.destination.url);
// optionally redirect or signal a problem
// redirect(newUrl);
commit(); // now flip the URL bar
},
async handler() {
// post-commit work: swap DOM, focus, scroll, etc.
renderRoute(location.search);
},
});
});