NextJS中Pixlee Instagram组件返回首页后消失的解决办法

问题根源在于NextJS的路由切换是单页应用式的组件卸载/重新挂载，原代码的useEffect仅在组件首次挂载时执行一次：

• 首次加载时脚本被添加并初始化组件，正常显示
• 路由返回后，脚本已存在于DOM中，useEffect不会再次执行，且Pixlee不会自动重新渲染组件

解决方案代码 #

import { useEffect } from "react";

const InstagramFeed = () => {
  useEffect(() => {
    const initPixlee = () => {
      // 确保容器存在且为空
      const container = document.getElementById('pixlee_container');
      if (!container) return;
      container.innerHTML = '';

      // 初始化Pixlee并添加组件
      Pixlee.init({ apiKey: "MYAPIKEYISHERE" });
      Pixlee.addSimpleWidget({ widgetId: "37392" });
    };

    // 检查Pixlee是否已加载
    if (window.Pixlee) {
      initPixlee();
    } else {
      // 未加载则设置初始化回调并添加脚本
      window.PixleeAsyncInit = initPixlee;
      const scriptTag = document.createElement("script");
      scriptTag.src = "//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js";
      scriptTag.async = true;
      // 避免重复添加脚本
      if (!document.querySelector('script[src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"]')) {
        document.body.appendChild(scriptTag);
      }
    }

    // 组件卸载时清理，避免内存泄漏
    return () => {
      if (window.Pixlee) {
        // 尝试销毁已存在的组件（根据Pixlee API调整）
        Pixlee.destroyWidget?.("37392");
      }
    };
  }, []); // 空依赖确保组件每次挂载都执行

  return (
    <div id="pixlee_container" className="h-[40rem] overflow-hidden"></div>
  );
};

export default InstagramFeed;

关键修改点 #

• 提取初始化逻辑为独立函数：方便在脚本已加载时直接调用，无需等待脚本加载
• 检查Pixlee是否已存在：路由返回时脚本已加载，直接执行初始化
• 避免重复添加脚本：通过选择器检查脚本是否已存在，防止多次插入
• 清理容器内容：重新初始化前清空容器，避免旧组件残留
• 添加卸载清理：调用Pixlee的销毁方法（如果API支持），避免内存泄漏

额外注意事项 #

• 如果Pixlee.destroyWidget不存在，可改为直接清空容器container.innerHTML = ''
• 若仍有问题，可监听路由变化作为useEffect的依赖，确保路由返回时重新执行初始化逻辑

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