Question

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

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

我使用了 nextJS 中的 google analytics 示例

这是我的简单_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

您可以使用 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

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

您可以为此使用 useLocation

const App = ({ Component, pageProps }: AppProps) => {
  let location = useLocation();

  useEffect(() => {

    alert(location );// this will be called whenever the route changes 

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

Answer 4

通过监听 router.asPath 的变化，我能够更简单地完成这项工作。

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

通过 NextJS 中的 useEffect 监听路由器变化

4 个答案: