Lesson 25 — Ultimate: hash router

Boss level: client-side routing

A single-page app (SPA) changes what is on screen without loading a new page. The simplest way is a hash router: the part of the URL after # (location.hash, e.g. #/about) picks which view to show, and the browser's hashchange event tells you when it changes. At its core a router is just a lookup table from path to handler (a function that builds the view), with a fallback for unknown paths.

window.addEventListener("hashchange", () => {
  render(location.hash.slice(1)); // "#/about" → "/about"
});

Why it matters: React Router, Vue Router and every SPA work on this idea.