Drop-in replacement of `useLocation()`/`useNavigate()` hooks in browser.

routing-hooks.ts

import { useCallback, useLayoutEffect, useMemo, useReducer } from "react";

function createHooks() {
  const listeners: (() => void)[] = [];

  window.addEventListener("popstate", () => {
    for (const listener of listeners) {
      listener();
    }
  });

  function useLocation(): Location {
    const [_updateId, notifyUpdate] = useReducer((a) => a + 1, 0);
    useLayoutEffect(() => {
      const listener = () => notifyUpdate();
      listeners.push(listener);
      return () => {
        const index = listeners.indexOf(listener);
        if (index > -1) {
          listeners.splice(index, 1);
        }
      };
    }, [notifyUpdate]);
    const location: Location = useMemo(() => {
      return { _updateId, ...window.location };
    }, [_updateId]);
    return location;
  }

  function useNavigate(options?: { replace?: boolean }) {
    const isReplace = options?.replace;
    return useCallback(
      (path: string) => {
        if (isReplace) {
          window.history.replaceState(null, "", path);
        } else {
          window.history.pushState(null, "", path);
        }
        window.dispatchEvent(new Event("popstate"));
      },
      [isReplace]
    );
  }

  return { useLocation, useNavigate };
}

const { useLocation, useNavigate } = createHooks();

export { useLocation, useNavigate };