SaaS starter

import { useEffect, useState, type ReactNode } from "react";

/** Minimal hash router: "#/path" -> "/path". Replace with react-router if you need nested routes. */
export function useHashRoute(defaultPath = "/") {
  const read = () => {
    const h = window.location.hash.replace(/^#/, "");
    return h.startsWith("/") ? h : defaultPath;
  };
  const [path, setPath] = useState<string>(() => (typeof window === "undefined" ? defaultPath : read()));
  useEffect(() => {
    const onChange = () => setPath(read());
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return path;
}

export function navigate(path: string) {
  window.location.hash = path.startsWith("/") ? path : "/" + path;
}

export function Link({ to, className, children }: { to: string; className?: string; children: ReactNode }) {
  return (
    <a href={"#" + to} className={className}>
      {children}
    </a>
  );
}