React中如何监听无刷新场景下的URL变化 解决replaceState监听失效问题

• 浏览器原生history.replaceState、history.pushState被调用时，不会主动触发任何事件，你监听的locationchange属于自定义事件，默认不会在修改路由时自动触发，只有点击浏览器前进/后退按钮才会触发原生popstate事件，这就是你的钩子只在挂载时执行一次的原因。

1. 给history方法打补丁（全局生效） #

将以下代码放到项目入口文件（如index.js/App.jsx）的最顶部，保证所有路由操作执行前先加载：

// 补丁replaceState
const originalReplace = window.history.replaceState;
window.history.replaceState = function (...args) {
  originalReplace.apply(this, args);
  // 手动触发自定义路由变更事件
  window.dispatchEvent(new Event('locationchange'));
};

// 如果项目中有用到pushState也加上对应补丁
const originalPush = window.history.pushState;
window.history.pushState = function (...args) {
  originalPush.apply(this, args);
  window.dispatchEvent(new Event('locationchange'));
};

2. 优化自定义usePath钩子 #

补充监听原生popstate事件，覆盖浏览器前进后退的场景：

const usePath = () => {
    const [path, pathSet] = useState(window.location.pathname);
    const updatePath = () => {
        pathSet(window.location.pathname);
    };
    useEffect(() => {
        window.addEventListener("locationchange", updatePath);
        // 兼容浏览器前进/后退操作
        window.addEventListener("popstate", updatePath);
        return () => {
            window.removeEventListener("locationchange", updatePath);
            window.removeEventListener("popstate", updatePath);
        };
    }, []);
    return path;
};

3. 面包屑组件（可选优化） #

可以直接通过路径计算显示内容，不需要额外声明状态：

const Breadcrumb = () => {
    const path = usePath();
    const isStorePage = path.includes('StoreSelection');
    return (
            <ol className="breadcrumb" style={breadcrumb}>
                <li key="1" className="breadcrumb-item align-items-center">
                    {isStorePage ? 'AAA' : 'BBB'}
                </li>
            </ol>
    );
}

如果你项目中使用了React Router，直接用官方提供的useLocation钩子即可获取实时路由，不需要自己实现路径监听逻辑。

内容的提问来源于stack exchange，提问作者mrtyvz61