React如何让脚本在除指定路由外的所有路由运行及问题排查

核心问题 #

1. 条件判断逻辑错误：你写的if(location.pathname !== "/page/sehat-a-z" || location.pathname !== "/page/sehat-a-z")是冗余的（两个条件完全重复），就算是两个不同路由，用||也会导致逻辑失效——任何路径都不可能同时等于两个不同值，这个条件会永远为true，完全起不到排除特定路由的作用，应该改用&&或数组包含判断。
2. useEffect未监听路由变化：依赖数组为空，组件仅在首次挂载时执行一次，路由切换后不会重新触发脚本加载逻辑。
3. 脚本重复加载风险：未判断脚本是否已存在，路由多次切换会重复添加脚本标签，引发资源浪费或冲突。

修复后的代码 #

useEffect(() => {
  // 定义需要排除的路由列表
  const excludedPaths = ["/page/sehat-a-z", "/page/另一个需要排除的路由"];
  
  // 当前路由不在排除列表中时执行脚本逻辑
  if (!excludedPaths.includes(location.pathname)) {
    // 先检查脚本是否已存在，避免重复加载
    const existingScript = document.querySelector('script[src="你的脚本URL"]');
    if (!existingScript) {
      appendScript("你的脚本URL");
    }

    // 初始化按钮配置
    window.wa_btnSetting = {
      btnColor: "#16BE45",
      ctaText: "WhatsApp Us",
      cornerRadius: 40,
      marginBottom: 20,
      marginLeft: 20,
      marginRight: 20,
      btnPosition: "right",
      whatsAppNumber: "+111111111111",
      welcomeMessage: "Hello",
      zIndex: 999999,
      btnColorScheme: "light"
    };

    // 确保脚本加载完成后执行初始化
    if (typeof _waEmbed === "function") {
      _waEmbed(window.wa_btnSetting);
    } else {
      // 如果脚本还没加载完，监听加载事件（仅执行一次）
      window.addEventListener('load', () => {
        _waEmbed(window.wa_btnSetting);
      }, { once: true });
    }
  }
}, [location.pathname]); // 监听路由变化，路由切换时重新执行

关键修改点 #

• 用数组excludedPaths管理需要排除的路由，扩展性更强，判断逻辑更清晰。
• 给useEffect添加location.pathname依赖，路由切换时自动重新校验并执行脚本逻辑。
• 增加脚本存在性检查，避免重复插入脚本标签。
• 优化初始化逻辑：先判断_waEmbed是否已存在，避免依赖window.onload（路由切换时window.onload早已触发）。

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