通过 NextJS 中的 useEffect 监听路由器更改

Question

当用户通过导航更改页面时，我试图获取 useEffect 来执行一些代码。

我的问题是 useEffect 不会在路线更改时执行（不会显示在控制台中）。它只在第一次初始页面加载时显示，之后就不再显示

我使用了谷歌分析nextJS 中的

这是我简单的 _app.tsx

import type { AppProps } from "next/app";
import "./styles/css.scss";
import { useRouter } from "next/dist/client/router";
import { useEffect} from "react";



const Child: React.FC = ({ children }) => {
  return (
    <>
      <div>{children}</div>
    </>
  );
};

const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();

  useEffect(() => {

    console.log("called");

  }, [router.events]);
  return (
    <>
      <Child>
        <Component {...pageProps} />
      </Child>
    </>
  );
};
export default App;

Answer 1

通过监听router.asPath.

  useEffect(() => {
    console.log('useEffect fired!', {asPath: router.asPath});
  }, [router.asPath]);

Answer 2

感谢@Faruk 的回答，我发现这是可能的，但我必须在我的钩子内使用那些 router.events.on 。

useEffect(() => {
    router.events.on("routeChangeComplete", () => {
      console.log("route change routeChangeComplete");
    });
    return () => {
      router.events.off("routeChangeComplete", () => {
        console.log("stoped");
      });
    };
  }, [router.events]);

Answer 3

您可以使用routeChangeStart,routeChangeComplete和routeChangeError当路线发生变化时，

在这里我使用 NProgress 来显示细长的进度条，如果你愿意，你可以尝试同样的事情并了解它是如何工作的，或者你可以只记录一些数据，() => { console.log("route change start") }

import '../styles/globals.css'
import 'nprogress/nprogress.css'
import NProgress from 'nprogress'
import { Router } from 'next/dist/client/router'
Router.events.on('routeChangeStart', () => {
  NProgress.start()
})
Router.events.on('routeChangeComplete', () => {
  NProgress.done()
})
Router.events.on('routeChangeError', () => {
  NProgress.done()
})
function MyApp({ Component, pageProps }) {
  return (
    <div>
      <h1 style={{ textAlign: 'center', alignItems: 'center' }}>
        Welcome to my App
      </h1>
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp