SPA routing basics

Learn simple client-side routing that works without page reloads with the History API.

SPA routing

A single-page application (SPA) changes views without reloading the page. The History API is the backbone of this: intercept link clicks, update the URL with pushState, and swap the view with JavaScript.

link.addEventListener('click', (event) => {
  event.preventDefault();
  history.pushState({}, '', link.href);
  render(link.href);
});

To support the back and forward buttons, you also add a popstate listener that calls render.

Catch link clicks

A link's default behavior is to reload the page. In an SPA you stop that with event.preventDefault(), then update the URL with pushState and draw the view yourself.

link.addEventListener('click', (event) => {
  event.preventDefault();
  const path = link.getAttribute('href');
  history.pushState({ path }, '', path);
  render(path);
});

Each click now adds a new history entry, so the back button works naturally.

Exercise Write a navigate function

Write a function named navigate(path). Inside it, call history.pushState with the state { path }, an empty string as the second argument and path as the third. Then call render(path) to update the view.

Show example solution

function navigate(path) {
  history.pushState({ path }, '', path);
  render(path);
}

Test yourself

What is the benefit of SPA routing with the History API?
- The view changes without reloading and back or forward works
- Full HTML is downloaded from the server each time
- The browser history is cleared
- The URL always stays the same
Show answer

The view changes without reloading and back or forward works — Correct! An SPA routes without reloading using the History API.

Stop the reload on click

link.addEventListener('click', (event) => {
  ____;
  history.pushState({}, '', link.href);
});

Show answer

link.addEventListener('click', (event) => {
  event.preventDefault();
  history.pushState({}, '', link.href);
});

Match the SPA routing steps

click

pushState is called
pushState

updates the URL
popstate

catches back or forward
view swap

content is changed

Next lesson: Summary - History API

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies