使用 next.js 监听路由更改以与 matomo/piwik 一起使用

Question

我正在尝试在 next.js 应用程序上监听路由更改，以便将导航记录到 matomo（又名 piwik）。根据 next.js 的文档，我必须做这样的事情：

Router.events.on('routeChangeStart', url => {
  // Do something
});

我必须在我的应用程序中的何处使用此代码才能记录所有路线更改事件？

（“where”表示在哪个文件/类/方法中）

Answer 1

您必须在pages/_app.js, 在componentDidMount方法中添加它：

componentDidMount() {
  Router.events.on("routeChangeStart", url => {
    if (window && window._paq) {
      window._paq.push(["setCustomUrl", url]);
      window._paq.push(["setDocumentTitle", document.title]);
      window._paq.push(["trackPageView"]);
    }
  });
}

不要忘记在您的基本页面（即您的布局或类似内容）中对其进行初始化：

componentDidMount() {
  Router.events.on("routeChangeStart", url => {
    if (window && window._paq) {
      window._paq.push(["setCustomUrl", url]);
      window._paq.push(["setDocumentTitle", document.title]);
      window._paq.push(["trackPageView"]);
    }
  });
}