React(Vite)项目中Lottie动画切换页面返回致应用崩溃求助

问题出在组件卸载时未清理Lottie动画实例，残留实例占用资源，再次挂载时引发冲突。以下是修复方案：

修复后的组件代码 #

import { useLottie } from "lottie-react";
import { useEffect } from "react";
import devAnimationData from "../../assets/lottie/dev-animation.json";

export const Developer = () => {
  const styles = {
    height: 500,
    width: 500
  };

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: devAnimationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  };
  // 同时获取Lottie动画实例
  const { View, animation } = useLottie(defaultOptions, styles);

  // 组件卸载时销毁动画实例，清理资源
  useEffect(() => {
    return () => {
      animation?.destroy();
    };
  }, [animation]);

  return View;
};

原因说明 #

切换页面时Developer组件会被卸载，但原Lottie动画实例未被销毁，仍在后台占用DOM或内存资源。再次返回页面时，新创建的动画实例会和残留的旧实例产生冲突，最终导致应用崩溃。通过在组件卸载时调用animation.destroy()，可彻底清理旧实例资源，避免冲突。

额外检查：确保路由切换时组件确实被卸载（比如React Router的路由组件在离开时会自动卸载，若用条件渲染需保证组件被完全移除而非隐藏）。

内容的提问来源于stack exchange，提问作者patrick-ts