Next.js 14中如何区分路由导航切换与初始页面加载？

方案一：利用useRouter的路由事件监听 #

Next.js的useRouter钩子提供了路由变化事件，我们可以通过监听routeChangeComplete识别路由切换行为，同时结合router.isReady判断初始加载状态：

'use client';

import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function YourLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [animateBg, setAnimateBg] = useState(false);

  useEffect(() => {
    // 路由切换完成时触发动画
    const handleRouteChange = () => {
      setAnimateBg(true);
      // 动画结束后重置状态，时间需与CSS过渡时长匹配
      setTimeout(() => setAnimateBg(false), 500);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    // 初始加载完成后，确保动画状态为关闭
    if (router.isReady) {
      setAnimateBg(false);
    }

    // 组件卸载时移除事件监听
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return (
    <div className={`layout-container ${animateBg ? 'bg-transition' : ''}`}>
      {children}
    </div>
  );
}

对应的CSS样式（需确保初始状态不包含过渡属性）：

.layout-container {
  background-color: #ffffff; /* 默认背景色 */
}

.layout-container.bg-transition {
  transition: background-color 0.5s ease-in-out;
  /* 可根据目标页面动态设置背景色，或结合页面组件传递状态 */
}

方案二：通过usePathname与首次渲染标记判断 #

利用usePathname的变化识别路由切换，同时用useRef标记首次渲染（即初始加载）：

'use client';

import { usePathname } from 'next/navigation';
import { useEffect, useState, useRef } from 'react';

export default function YourLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isFirstLoad = useRef(true);
  const [animateBg, setAnimateBg] = useState(false);

  useEffect(() => {
    if (isFirstLoad.current) {
      // 首次渲染为初始加载，不触发动画
      isFirstLoad.current = false;
      return;
    }
    // pathname变化说明是路由切换，触发动画
    setAnimateBg(true);
    setTimeout(() => setAnimateBg(false), 500);
  }, [pathname]);

  return (
    <div className={`layout-container ${animateBg ? 'bg-transition' : ''}`}>
      {children}
    </div>
  );
}

关键注意事项 #

• 所有逻辑必须放在客户端组件中（添加'use client'指令），因为useRouter、usePathname仅支持客户端环境
• 调整setTimeout的时长与你的CSS过渡时长保持一致，避免状态残留影响后续初始加载
• 如果仅需特定页面触发动画，可将逻辑移至对应页面的客户端组件，而非全局布局

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