如何基于React Router移除指定路由下的第三方聊天机器人脚本？

针对你的需求，我们可以通过前端路由监听+动态脚本控制的方式实现，下面分两种场景给出具体方案（假设你使用的是React框架，因为你的index.html中有#root节点，其他框架思路类似）：

方案一：完全按需加载/移除脚本（推荐用于严格禁止加载的路由） #

这种方案会在允许的路由下加载Tawk脚本，在禁止的路由下销毁实例并移除脚本，彻底避免不必要的资源加载。

步骤1：修改public/index.html #

先移除原来自动执行的Tawk脚本，避免初始加载时就加载聊天机器人：

<body>
  <div id="root"></div>
  <!-- 移除原来的Tawk脚本 -->
</body>

步骤2：在React组件中实现动态控制 #

在你的根组件（比如App.js）中，添加路由监听和脚本控制逻辑：

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

// 定义不需要显示聊天机器人的路由列表
const EXCLUDED_ROUTES = ['/login', '/signup', '/checkout']; // 替换为你的目标路由

// 加载Tawk聊天机器人的函数
const loadTawk = () => {
  if (window.Tawk_API) return; // 避免重复加载
  window.Tawk_API = window.Tawk_API || {};
  const Tawk_LoadStart = new Date();
  
  const script = document.createElement('script');
  const firstScript = document.getElementsByTagName('script')[0];
  
  script.async = true;
  script.src = 'https://embed.tawk.to/<TOKEN_ID>/default'; // 替换你的TOKEN
  script.charset = 'UTF-8';
  script.setAttribute('crossorigin', '*');
  script.id = 'tawk-chat-script'; // 标记ID方便后续移除
  
  firstScript.parentNode.insertBefore(script, firstScript);
};

// 销毁Tawk实例并移除脚本的函数
const destroyTawk = () => {
  if (!window.Tawk_API) return;
  
  // 先隐藏并销毁Tawk实例
  window.Tawk_API.hideWidget();
  window.Tawk_API.destroyWidget();
  
  // 移除脚本标签
  const tawkScript = document.getElementById('tawk-chat-script');
  if (tawkScript) tawkScript.remove();
  
  // 清除全局变量，避免残留
  delete window.Tawk_API;
};

function App() {
  const location = useLocation();

  useEffect(() => {
    const currentPath = location.pathname;
    
    if (EXCLUDED_ROUTES.includes(currentPath)) {
      // 当前路由在禁止列表，销毁Tawk
      destroyTawk();
    } else {
      // 当前路由允许，加载Tawk
      loadTawk();
    }

    // 组件卸载时清理Tawk
    return () => destroyTawk();
  }, [location.pathname]);

  return (
    <div className="app-container">
      {/* 你的路由内容 */}
    </div>
  );
}

export default App;

方案二：仅隐藏聊天窗口（高效，适合频繁切换路由场景） #

如果只是不想显示聊天机器人，但可以接受脚本在后台加载，这种方案更高效，不用反复加载/移除脚本，直接调用Tawk的API控制显示隐藏。

步骤1：修改public/index.html #

保留Tawk脚本，但添加初始隐藏逻辑：

<body>
  <div id="root"></div>
  <script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
      var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
      s1.async=true;
      s1.src='https://embed.tawk.to/<TOKEN_ID>/default';
      s1.charset='UTF-8';
      s1.setAttribute('crossorigin','*');
      s0.parentNode.insertBefore(s1,s0);
    })();
    // 初始化后自动隐藏，等待路由判断后再显示
    Tawk_API.onLoad = function() {
      Tawk_API.hideWidget();
    };
  </script>
</body>

步骤2：在React组件中控制显示隐藏 #

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

const EXCLUDED_ROUTES = ['/login', '/signup', '/checkout'];

function App() {
  const location = useLocation();

  useEffect(() => {
    const currentPath = location.pathname;
    
    if (window.Tawk_API) {
      if (EXCLUDED_ROUTES.includes(currentPath)) {
        window.Tawk_API.hideWidget();
      } else {
        window.Tawk_API.showWidget();
      }
    }
  }, [location.pathname]);

  return (
    <div className="app-container">
      {/* 你的路由内容 */}
    </div>
  );
}

export default App;

关键说明 #

• 如果你使用的是Vue/Angular等其他框架，核心思路一致：监听路由变化，根据路由执行加载/销毁或显示/隐藏逻辑。
• 方案一适合对资源加载有严格要求的场景，方案二更适合路由频繁切换的情况，减少网络请求开销。

内容的提问来源于stack exchange，提问作者Sunil Kumar Singh