在 react 应用中，使用 usescript 等自定义 hook 动态注入外部脚本时，若脚本路径采用相对形式（如 ./tagging.js），在标准路由下可能正常工作，但在动态路由（如 /brand/:brandname）下会因浏览器解析基准 url 变化而导致脚本加载失败，并抛出 "unexpected token '

理解 React 应用中的脚本动态注入

在现代 React 应用中，我们有时需要动态加载第三方脚本，例如分析工具、广告标签或自定义功能库。为了更好地管理脚本的生命周期和状态，通常会封装一个自定义 Hook，如 useScript。这个 Hook 负责创建、插入 <script> 标签到文档头部，并监听其加载或错误事件，以返回脚本的当前状态（loading、ready 或 error）。</script>

以下是一个典型的 useScript Hook 实现：

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

const useScript = (url) => {
  const [status, setStatus] = useState(url ? 'loading' : 'idle');
  const location = useLocation(); // 引入 useLocation 以监听路由变化

  useEffect(() => {
    if (!url) {
      setStatus('idle');
      return;
    }

    // 尝试查找已存在的脚本，避免重复加载
    let script = document.querySelector(`script[src="${url}"]`);

    if (!script) {
      // 如果脚本不存在，则创建并插入
      script = document.createElement('script');
      script.src = url;
      script.type = 'text/j*ascript';
      script.async = true;
      document.head.appendChild(script);

      // 首次设置 data-status 属性
      const setAttributeFromEvent = (event) => {
        script.setAttribute(
          'data-status',
          event.type === 'load' ? 'ready' : 'error'
        );
      };
      script.addEventListener('load', setAttributeFromEvent);
      script.addEventListener('error', setAttributeFromEvent);
    } else {
      // 如果脚本已存在，则读取其状态
      setStatus(script.getAttribute('data-status'));
    }

    // 监听脚本加载状态，更新组件的 state
    const setStateFromEvent = (event) => {
      setStatus(event.type === 'load' ? 'ready' : 'error');
    };
    script.addEventListener('load', setStateFromEvent);
    script.addEventListener('error', setStateFromEvent);

    // 清理函数：组件卸载或 URL 变化时移除事件监听器
    return () => {
      if (script) {
        script.removeEventListener('load', setStateFromEvent);
        script.removeEventListener('error', setStateFromEvent);
      }
    };
  }, [url, location]); // 依赖项包括 url 和 location

  return status;
};

export default useScript;

在组件中使用时，通常会这样调用：

const status = useScript('./tagging.js'); // 使用相对路径
console.log(status);

动态路由下的脚本加载问题

当 React 应用使用 react-router-dom 配置了动态路由时，例如：

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情

<Routes>
   <Route path='/offer' element={<Offer />} />
   <Route path='/hearing-agency' element={<HearingAgency />} />
   <Route
     path='/hearing-agency/brand/:brandname' // 动态路由
     element={<HearingAgency />}
   />
   <Route path='*' element={<Offer />} />
</Routes>

如果我们在 /offer 这样的标准路由下调用 useScript('./tagging.js')，脚本通常能正常加载。然而，当导航到 /hearing-agency/brand/phonak 这样的动态路由时，尽管 useScript Hook 可能报告脚本状态为 ready，但实际上脚本并未正确执行，并且在控制台会抛出 SyntaxError: Unexpected token '

检查文档的

部分，会发现 <script> 标签确实被插入了，但其 src 属性在动态路由下似乎未能正确解析。<h3>错误原因分析：相对路径与基准 URL<p>问题的根本原因在于，当使用相对路径（如 ./tagging.js）来指定脚本源时，浏览器会根据当前页面的 <strong>基准 URL (Base URL) 来解析这个相对路径。<ul><li><strong>标准路由 (/offer): 当页面 URL 为 https://yourdomain.com/offer 时，相对路径 ./tagging.js 会被解析为 https://yourdomain.com/tagging.js。<li><strong>动态路由 (/hearing-agency/brand/phonak): 当页面 URL 为 https://yourdomain.com/hearing-agency/brand/phonak 时，相对路径 ./tagging.js 会被解析为 https://yourdomain.com/hearing-agency/brand/tagging.js。<p>如果你的 tagging.js 文件实际存放在应用的 public 目录（或根目录），那么在动态路由下，浏览器会尝试从 https://yourdomain.com/hearing-agency/brand/tagging.js 加载脚本。由于这个路径通常不存在实际的 tagging.js 文件，服务器可能会返回应用的 index.html 内容（这是单页应用路由的常见配置），浏览器在尝试将 HTML 内容解析为 J*aScript 时，就会遇到 < 符号，从而抛出 SyntaxError: Unexpected token '<' 错误。<h3>解决方案：使用绝对路径<p>解决这个问题的关键是确保脚本的 URL 始终相对于应用的根目录解析，无论当前路由如何。这可以通过将相对路径改为绝对路径来实现。<p>将 useScript 的调用从：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">useScript('./tagging.js'); // 相对路径</pre></div><p>修改为：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">useScript('/tagging.js'); // 绝对路径</pre></div><p>或者，如果你的脚本文件名为 dummyscript.js：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">useScript('/dummyscript.js'); // 绝对路径</pre></div><p>通过在路径前添加 /，我们指示浏览器从当前域名的根目录开始解析路径。这样，无论当前页面是 /offer 还是 /hearing-agency/brand/phonak，/tagging.js 都会被正确解析为 https://yourdomain.com/tagging.js，从而确保脚本能够从正确的位置加载。<h3>注意事项与最佳实践<ol><li><strong>统一路径策略: 在 React 应用中动态加载资源（如脚本、图片、字体）时，尤其是在公共文件夹中的资源，推荐始终使用绝对路径（以 / 开头），以避免因路由变化导致的路径解析问题。<li><strong>public 目录: 放在 public 目录下的文件在构建时会被直接复制到输出目录的根部，因此它们可以通过 /文件名.js 的形式直接访问。<li><strong>BrowserRouter 的 basename: 如果你的 React 应用部署在一个子目录下（例如 https://yourdomain.com/my-app/），并且你使用了 BrowserRouter，那么你可能需要配置 basename 属性：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;BrowserRouter basename=&quot;/my-app&quot;&gt; {/* ... 你的路由配置 */} &lt;/BrowserRouter&gt;</pre></div><p>在这种情况下，你的绝对路径 '/tagging.js' 仍会相对于 basename 解析，即 https://yourdomain.com/my-app/tagging.js。<li><strong>错误处理: useScript Hook 中已经包含了错误状态的监听，但在实际应用中，你可能需要更健壮的错误处理机制，例如在脚本加载失败时显示备用内容或记录错误日志。<li><strong>脚本的幂等性: 确保你的脚本在被多次注入时不会产生副作用。useScript Hook 通过 document.querySelector 检查脚本是否已存在，这有助于避免重复插入相同的脚本。<h3>总结<p>在 React 应用中利用 useScript 等自定义 Hook 动态加载外部脚本时，面对动态路由导致的脚本加载失败问题，其核心原因在于相对路径在不同基准 URL 下的解析差异。通过将脚本路径从相对路径（如 ./tagging.js）修改为绝对路径（如 /tagging.js），可以确保脚本始终从应用根目录正确解析，从而彻底解决 SyntaxError: Unexpected token '<' 的问题。采用绝对路径是处理 React 应用中静态资源路径的推荐做法，能够提升应用的健壮性和可维护性。</script>

以上就是React 应用中动态路由下脚本注入失败的解决方案的详细内容，更多请关注其它相关文章！

# 通常会  # 潍坊网络seo策划  # 江津全网营销推广  # 通州专业网站优化  # 河源抖音seo平台  # 中职SEO专业电子书  # 牛奶最新营销推广法  # 西青区网站推广营销专员  # 德州齐河seo价格  # 江源抖音seo  # 望江营销型网站建设  # 如何实现  # react  # 服务端  # 相对于  # 不存在  # 但在  # 放在  # 抛出  # 自定义  # 加载  # 路由  # 浏览器  # js 

相关栏目： 【 科技资讯46185 】 【 网络学院92790 】

相关推荐： Golang如何实现Web接口签名验证_Golang Web接口签名校验开发方法  Kafka Streams中基于消息头条件过滤消息的实现指南  企业名称高精度匹配：N-gram方法在结构相似性分析中的应用  微信群消息显示延迟如何解决 微信群消息刷新优化方法  如何在J*a中实现统一对象行为接口_项目大型化时的接口规范化  C#使用XPath查询节点时出错？ 常见语法错误与调试技巧  支付宝解绑银行卡步骤_支付宝如何解除绑定银行卡  Excel中VLOOKUP的第四个参数是干什么用的_Excel VLOOKUP第四参数作用解析  Win11网速慢怎么解决 Win11网络设置优化解除限速  为什么我的微信朋友圈看不到别人的更新_微信朋友圈更新显示异常解决方法  vivo手机互传视频怎么操作_vivo手机互传视频详细传输方法  如何在复杂的电商平台中优雅地管理共享资源并确保正确重定向，使用spryker-shop/resource-share-page模块助你一臂之力  MinIO大规模对象列表性能瓶颈深度解析与外部元数据管理策略  Lar*el表单中优雅地处理“返回”按钮以规避验证：最佳实践指南  ExcelARRAYTOTEXT函数怎么自定义分隔符输出数组文本_ARRAYTOTEXT实现动态生成SQL语句  文本文档写html代码怎么运行_文本文档html代码运行步骤【教程】  Golang如何实现微服务鉴权与权限控制_Golang微服务鉴权与权限管理实践  利用5118提升短视频内容效果_5118短视频关键词优化方法  C++如何打印当前代码行号与文件名_C++预定义宏FILE与LINE的使用  神庙逃亡小游戏在线玩 神庙逃亡小游戏入口  Go Martini框架：动态服务解码后的图片内容  php源码怎么看淘宝客系统_看php源码淘宝客系统技巧  wps文字怎么插入目录并自动更新_wps文字如何插入目录并自动更新方法  Lar*el用户头像管理：实现图片缩放、存储与旧文件安全删除的最佳实践  HuggingFaceEmbeddings中向量嵌入维度调整的限制与理解  Win11怎么安装Linux子系统 Win11 WSL2安装Ubuntu及环境配置指南  C++ explicit关键字防止隐式转换_C++构造函数安全规范  提升Kafka消费者健壮性：会话超时处理与消息处理语义  铁路12306卧铺选择攻略 铁路12306下铺座位预定技巧  俄罗斯浏览器官网直达链接 俄罗斯浏览器最新在线入口导航  创客贴用户入口官网登录 创客贴网页版电脑版系统  向日葵客户端怎么进行远程CentOS控制_向日葵客户端远程CentOS控制操作教程  如何创建没有密码的Windows本地账户_跳过微软账户登录的技巧【教程】  Surface怎么安装系统 微软Surface Pro U盘重装win11教程  HTML元素状态管理：根据DIV内容动态启用/禁用按钮  Gmail邮箱申请注册直达_Gmail邮箱免费注册PC版官网入口2025  妖精漫画网页版登录入口免费_妖精漫画官网主页直接阅读漫画  在Go语言中利用后缀数组处理多字符串：实现高效文本匹配与自动补全  Django模型中自动计算可用余额的实现方法  Python中高效访问嵌套字典与列表中的键值对  Safari自带网页翻译功能怎么用 无需插件轻松看懂外文网站【方法】  J*aScript中localStorage数据的获取、清洗与格式化教程  QQ邮箱在线登录平台 QQ邮箱个人邮箱网页版入口  12306选座怎么选到特殊座位_12306特殊座位选择注意事项  Lar*el Form Request中唯一性验证在更新操作中的正确实现  微信网页版官方快速登录入口 微信网页版网页版账号直达  如何在离线环境中使用Composer_Composer离线安装依赖包的技巧与策略  c++如何使用TBB库进行任务并行_c++ Intel线程构建模块  Win10桌面图标出现小盾牌怎么办 Win10去除UAC图标教程【解决】  解决深度学习模型训练初期异常高损失与完美验证准确率问题