NextJs useEffect在我每次路由时触发

Next.js 是一个基于 React 的服务端渲染框架，它提供了一种简单的方式来创建具有服务器渲染和静态生成功能的 React 应用程序。useEffect 是 React 提供的一个 Hook，用于处理副作用操作。

在 Next.js 中，当每次路由切换时，页面组件会被卸载和重新加载。这就意味着组件的状态会丢失，而 useEffect 可以帮助我们在组件挂载、更新和卸载时执行一些副作用操作。

使用 useEffect 可以在每次路由切换时触发特定的操作，例如发送网络请求、订阅事件、更新全局状态等。下面是一个示例：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  useEffect(() => {
    // 在每次路由切换时触发的操作
    console.log('路由切换了');

    // 可以在这里发送网络请求、订阅事件等

    return () => {
      // 在组件卸载时执行的清理操作
      console.log('组件卸载了');

      // 可以在这里取消网络请求、取消事件订阅等
    };
  }, [router.pathname]); // 仅在路由路径变化时触发

  return <div>My Component</div>;
}

在上面的示例中，我们使用了 useRouter Hook 来获取当前路由信息。然后，通过 useEffect 来定义在每次路由切换时触发的操作。在 useEffect 的回调函数中，我们可以执行一些异步操作，并在返回的清理函数中取消这些操作。

Next.js 提供了一些其他的 Hook 和功能，用于处理路由和页面生命周期。例如，useRouter 可以获取当前路由信息，useRouterEvents 可以监听路由事件，getStaticProps 和 getServerSideProps 可以在页面渲染之前获取数据等。

推荐的腾讯云相关产品和产品介绍链接地址：