Source

// A tiny path router: the site is static, so every path serves index.html and the app reads the URL.
import { useEffect, useState } from "react";

/** Goes to a path in the app. A #hash scrolls to that section once it shows. */
export function navigate(to: string) {
  if (to === location.pathname + location.search + location.hash) return;
  history.pushState(null, "", to);
  window.dispatchEvent(new PopStateEvent("popstate"));
  const id = to.split("#")[1];
  requestAnimationFrame(() => {
    const target = id && /^[a-z][\w-]*$/i.test(id) ? document.getElementById(id) : null;
    if (target) target.scrollIntoView({ block: "start" });
    else window.scrollTo(0, 0);
  });
}

export function usePath(): string {
  const [path, setPath] = useState(location.pathname);
  useEffect(() => {
    const onPop = () => setPath(location.pathname);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  return path;
}