React页面导航时无法移除Zendesk Widget脚本的问题

我来帮你搞定这个困扰！你遇到的问题其实很常见——你的自定义hook确实在组件卸载时移除了<script>标签，但Zendesk脚本加载完成后，已经在浏览器全局创建了Widget实例，并且把它的DOM元素直接添加到了页面里。光删掉脚本标签根本动不了已经初始化好的Widget，所以它才会在所有页面都显示。

那该怎么解决呢？关键是要调用Zendesk官方提供的Widget销毁方法，而不是只删脚本标签。具体步骤如下：

1. 利用Zendesk的destroy API清理Widget #

Zendesk Web Widget提供了zE('webWidget', 'destroy')方法，这个方法会彻底销毁Widget实例，并且移除它在页面上生成的所有DOM元素。我们需要在组件卸载时调用这个方法。

2. 修改你的useScript Hook #

把销毁逻辑加入到Hook的清理函数里，同时还要处理全局对象的残留问题，避免下次加载时出错。修改后的代码如下：

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    script.id = 'ze-snippet';

    document.body.appendChild(script);

    return () => {
      // 先销毁Zendesk Widget实例
      if (window.zE) {
        window.zE('webWidget', 'destroy');
        // 清理全局的zE对象，防止残留影响下次加载
        delete window.zE;
      }
      // 再移除页面上的script标签
      const existingScript = document.getElementById('ze-snippet');
      if (existingScript) {
        document.body.removeChild(existingScript);
      }
    };
  }, [url]); // 把url加入依赖数组，确保url变化时能重新执行逻辑
};

export default useScript;

补充说明 #

• 一定要先调用destroy再删脚本标签，顺序不能反，不然脚本都删了就找不到zE对象了。
• 如果你的Zendesk Widget版本比较旧，destroy方法可能有所不同，可以去官方文档确认对应的销毁API，但目前大部分新版本都支持这个写法。
• 加入url到依赖数组是为了健壮性——如果以后你需要动态切换不同的Widget地址，Hook能自动重新加载和清理。

这样修改后，当你从当前页面导航离开时，Widget会被彻底销毁并移除，不会再出现在其他页面啦！

备注：内容来源于stack exchange，提问作者Vijay Kalambekar