Build a SPA Router from Scratch — How React Router Works

const routes = {
  "/": () => `<h1>Home</h1>`,
  "/about": () => `<h1>About</h1>`,
  "/students": async () => renderList(await fetchStudents()),
};

function render(path) {
  const view = routes[path] ?? (() => `<h1>404</h1>`);
  Promise.resolve(view()).then((html) => (app.innerHTML = html));
}

// intercept link clicks
document.addEventListener("click", (e) => {
  const a = e.target.closest("a[data-link]");
  if (!a) return;
  e.preventDefault();
  history.pushState(null, "", a.href);      // change URL, no reload
  render(location.pathname);
});

// back/forward buttons
window.addEventListener("popstate", () => render(location.pathname));

render(location.pathname);   // initial