如何让我的 Pixlee Instagram 提要在 NextJS 中的页面重新加载时不消失？

Question

这是我的代码：

import { useEffect } from "react";

const InstagramFeed = () => {
  useEffect(() => {
    window.PixleeAsyncInit = function () {
      Pixlee.init({ apiKey: "MYAPIKEYISHERE" });
      Pixlee.addSimpleWidget({ widgetId: "37392" });
    };
    const scriptTag = document.createElement("script");
    scriptTag.src =
      "//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js";
    document.body.appendChild(scriptTag);
  }, []);

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

export default InstagramFeed;

我的主页上有这个组件，当我最初加载网站并查看主页时，该组件会正常显示。 但是，一旦我导航到一个新页面然后返回主页，该组件就不再存在——它消失了。

我该如何解决这个问题，以便在我离开主页后返回主页时继续显示该组件？

我正在使用 NextJS。

我认为这是因为我将代码放入它自己的组件中，但是当我将它直接放在主页上时，它并没有 function 任何不同。

Answer 1

解决了！

通过阅读 Pixlee 的文档设法弄清楚了。 我应该做的事情开始。 会节省我几个小时。

解决方案是初始化 Pixlee 并在我的网站首次加载时调用我的特定 API，然后在我更改页面时使用 Pixlee.close(true) function 关闭小部件。 我将其与 NextJS useRouter 集成并解决了问题。

这是它的样子，我将其添加到我的 layout.js 中：

const router = useRouter();

  useEffect(() => {
    window.PixleeAsyncInit = function () {
      Pixlee.init({ apiKey: "SPECIALAPIKEYGOESHERE" });
    };

    const scriptTag = document.createElement("script");
    scriptTag.src =
      "//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js";
    document.body.appendChild(scriptTag);

    if (router.route === "/") {
      Pixlee.addSimpleWidget({ widgetId: "37392" });
      Pixlee.resizeWidget();
    } else {
      Pixlee.close(true);
      Pixlee.resizeWidget();
    }
  }, []);