如何在React中重新初始化init()，使Adobe Animate SVG路由切换时重运行？

我之前也碰到过一模一样的情况——用Adobe Animate导出的SVG动画在React项目首次加载正常，路由切走再切回来就完全不动了，核心原因就是React单页应用不会刷新页面，index.html里的init()只在页面首次加载时执行一次。给你几个亲测有效的解决办法：

1. 利用React生命周期钩子手动触发动画初始化 #

不管你用的是类组件还是函数组件，都可以在组件挂载时调用init()，这样每次路由切回组件都会重新初始化动画。以函数组件为例，用useEffect实现：

import { useEffect } from 'react';

export default function Cover() {
  useEffect(() => {
    // 确保Animate导出的全局init函数存在
    if (typeof window.init === 'function') {
      window.init();
    }

    // 组件卸载时清理动画实例，防止内存泄漏
    return () => {
      // 如果Animate导出的JS有提供停止/销毁方法（比如lottie的destroy），这里调用
      if (window.animInstance?.destroy) {
        window.animInstance.destroy();
      }
    };
  }, []); // 空依赖数组保证只在组件挂载时执行一次

  return (
    <div className="cover-component">
      {/* 这里放你的SVG元素，注意id要和Animate导出的JS里的容器id对应 */}
      <svg id="animation-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>
    </div>
  );
}

这样每次Cover组件挂载（路由切回来）时，都会重新执行init()，动画就能正常播放了。

2. 修改Adobe Animate导出的JS，支持重复初始化 #

有时候Animate导出的init()函数会存在全局变量冲突的问题——第一次执行后，第二次调用会因为变量已存在而跳过初始化。你可以修改导出的JS文件，让它支持重复调用：

// 找到原来的init函数，添加实例检查和销毁逻辑
let animInstance = null;

function init() {
  // 如果已有动画实例，先销毁
  if (animInstance) {
    animInstance.destroy();
  }

  // 重新创建动画实例（下面的代码替换成你Animate导出的初始化逻辑）
  animInstance = lottie.loadAnimation({
    container: document.getElementById('animation-container'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    animationData: /* 你的SVG动画数据 */
  });

  // 把实例挂到window上，方便组件卸载时清理
  window.animInstance = animInstance;
}

修改后，每次调用init()都会重置动画，不会因为之前的实例存在而失效。

3. 用key属性强制组件重新挂载 #

如果上面的方法都不想用，还可以给Cover组件加一个随路由变化的key，这样路由切换时key改变，React会完全卸载再重新挂载组件，自然会触发init()（前提是你已经把初始化逻辑放到组件挂载钩子中）：

// 在路由配置中
<Route path="/cover" element={<Cover key={window.location.pathname} />} />

这个方法比较粗暴，但胜在简单，适合快速验证问题。

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