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";

export function navigate(to: string, replace = false) {
  if (to === location.pathname + location.search) return;
  history[replace ? "replaceState" : "pushState"](null, "", to);
  window.dispatchEvent(new PopStateEvent("popstate"));
  if (!replace) window.scrollTo(0, 0);
}

/** The current path and query, updated on every navigation. */
export function useLocation(): { path: string; query: URLSearchParams } {
  const [loc, setLoc] = useState(() => location.pathname + location.search);
  useEffect(() => {
    const onPop = () => setLoc(location.pathname + location.search);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  const [path, search = ""] = loc.split("?");
  return { path: path.replace(/\/+$/, "") || "/", query: new URLSearchParams(search) };
}

/** Same-page links: a normal <a href> that navigates without a reload. */
export function onLink(e: React.MouseEvent<HTMLAnchorElement>) {
  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
  const href = e.currentTarget.getAttribute("href");
  if (!href || !href.startsWith("/") || href.startsWith("//") || e.currentTarget.target) return;
  e.preventDefault();
  navigate(href);
}