44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
const initHistoryPatch = (() => {
|
|
let initialized = false;
|
|
return () => {
|
|
if (initialized) return;
|
|
initialized = true;
|
|
|
|
const patch = (method: "pushState" | "replaceState") => {
|
|
const original = history[method];
|
|
history[method] = function (...args) {
|
|
const result = original.apply(this, args);
|
|
window.dispatchEvent(new Event("locationchange"));
|
|
return result;
|
|
};
|
|
};
|
|
|
|
patch("pushState");
|
|
patch("replaceState");
|
|
};
|
|
})();
|
|
|
|
export const usePathname = () => {
|
|
const [pathname, setPathname] = useState("");
|
|
|
|
useEffect(() => {
|
|
initHistoryPatch();
|
|
|
|
const update = () => {
|
|
queueMicrotask(() => setPathname(window.location.pathname));
|
|
};
|
|
|
|
window.addEventListener("popstate", update);
|
|
window.addEventListener("locationchange", update);
|
|
|
|
return () => {
|
|
window.removeEventListener("popstate", update);
|
|
window.removeEventListener("locationchange", update);
|
|
};
|
|
}, []);
|
|
|
|
return pathname;
|
|
};
|