Next.js图片模糊占位符失效及动态路由动画问题求助

你的判断完全正确——同动态路由（比如从/titles/pac-man/跳转到/titles/walking-dead/）跳转时，组件实例会被复用，不会触发卸载重建，导致useState的状态（比如你的show）和useEffect的初始化逻辑都不会重置，这就是问题的核心原因。

具体问题分析 #

1. 状态残留：你的show状态在首次进入时是false，触发视口交集后变为true，但路由切换后这个值会保留，导致动画直接处于已触发状态，不会重新等待视口交集。
2. 图片占位符失效：同理，图片组件如果复用实例，会认为图片已经加载完成，不会重新渲染模糊占位符。

解决方案 #

1. 监听路由参数变化，重置组件状态

通过路由钩子获取当前slug参数，监听其变化来重置状态：

import { useRouter } from 'next/router';
import { useInView } from 'react-intersection-observer';

const TitlePage = () => {
  const router = useRouter();
  const { slug } = router.query;
  const [show, setShow] = useState(false);
  const { ref, inView } = useInView();

  // 路由切换时重置show状态
  useEffect(() => {
    setShow(false);
  }, [slug]);

  useEffect(() => {
    if (inView) {
      setShow(true);
    }
  }, [inView]);

  return (
    <div ref={ref} className={show ? 'animate-fade-in' : 'opacity-0'}>
      {/* 页面内容 */}
    </div>
  );
};

2. 强制图片组件重新渲染

给图片组件添加key={slug}，确保路由切换时图片组件完全重建，重新触发模糊占位符逻辑：

import Image from 'next/image';

// 组件内图片渲染部分
<Image
  key={slug}
  src={currentTitleImage}
  placeholder="blur"
  blurDataURL={currentTitleBlurUrl}
  width={800}
  height={600}
  alt={currentTitleName}
/>

3. 调整视口观察者配置

如果你的useInView用了默认的triggerOnce: true，可以改为false，允许路由切换后重新监听视口交集：

const { ref, inView } = useInView({
  triggerOnce: false,
  threshold: 0.1 // 根据需求调整触发阈值
});

总结 #

本质问题就是同路由组件的复用机制导致状态残留，只要通过监听路由参数重置状态、给关键组件加key强制重渲染，就能解决图片占位符和动画失效的问题。

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