Back to Playground

Navigation

SPA route changes, history API events, hash navigation, and back/forward detection.

history.pushState()
Navigation
Pushes a new URL onto the history stack — detected by MutationObserver.

Navigation event: from current URL, to URL with ?test=push

history.replaceState()
Navigation
Replaces the current history entry with a new URL — quieter than pushState.

Navigation event: URL change detected by MutationObserver

Hash Navigation
Navigation
Changes location.hash — fires a hashchange and may be detected as navigation.

Navigation event: to URL with #test-section

Back Button (popstate)
Navigation
Pushes a state then goes back — tests the popstate event listener.

Navigation event via popstate (back button)