← Lessons

quiz vs the machine

Gold1410

Frontend

The History API Routing

Change the URL without reloads to power single page app routing.

5 min read · core · beat Gold to climb

URLs without reloads

The History API lets JavaScript change the browser URL and manage session history without a full page reload. It is the foundation of client side routing in single page apps.

  • pushState adds a new history entry and changes the URL
  • replaceState updates the current entry without adding one
  • back, forward, and go move through the history stack
  • Each entry can carry a serialisable state object

Reacting to navigation

When the user presses back or forward, the browser fires a popstate event with the saved state. Your router listens for popstate and renders the matching view, keeping the UI in sync with the URL.

Why not the hash

Older routers used the hash fragment to avoid reloads. The History API gives clean paths instead, but it requires the server to serve the app for any path, so deep links work on refresh.

Key idea

The History API changes the URL via pushState and replaceState without reloading, and routers listen for popstate to render views as the user navigates history.

Check yourself

Answer to earn rating on the learn ladder.

1. What is the difference between pushState and replaceState?

2. Which event lets a router respond to the back and forward buttons?

3. What server requirement comes with using clean History API paths?