如何在NextJS外部捕获地址历史变更事件？

NextJS客户端路由导航时，底层会调用history.pushState或history.replaceState，但这两个原生方法不会自动触发对应的事件，这就是你之前监听pushState/replaceState事件无效的原因。popState仅在浏览器原生前进后退时触发，navigate事件目前并未被NextJS的路由实现触发。

要在NextJS外部捕获这些路由变更，你可以通过重写history对象的pushState和replaceState方法来实现，具体代码如下（放在testerTools.js中）：

const runfunction = () => {
  console.log("it ran");
};

// 保存原生方法
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 重写pushState，执行原生逻辑后调用runfunction
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  runfunction();
};

// 重写replaceState，执行原生逻辑后调用runfunction
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  runfunction();
};

// 监听浏览器前进后退触发的popstate事件
window.addEventListener('popstate', runfunction);

这个方案在Firefox中完全有效，因为NextJS的路由操作最终都会调用全局history对象的这两个方法，重写后可以拦截到所有客户端路由变更，包括Link组件触发的导航。

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