在 react 应用中，使用 usescript 等自定义 hook 动态注入外部脚本时，若脚本路径采用相对形式（如 ./tagging.js），在标准路由下可能正常工作，但在动态路由（如 /brand/:brandname）下会因浏览器解析基准 url 变化而导致脚本加载失败，并抛出 “unexpected token ‘
理解 React 应用中的脚本动态注入
在现代 React 应用中，我们有时需要动态加载第三方脚本，例如分析工具、广告标签或自定义功能库。为了更好地管理脚本的生命周期和状态，通常会封装一个自定义 Hook，如 useScript。这个 Hook 负责创建、插入 标签到文档头部，并监听其加载或错误事件，以返回脚本的当前状态（loading、ready 或 error）。
以下是一个典型的 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/javascript'; 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 配置了动态路由时，例如：
<Route path='/offer' element={} /> <Route path='/hearing-agency' element={} /> <Route path='/hearing-agency/brand/:brandname' // 动态路由 element={} /> <Route path='*' element={} />
如果我们在 /offer 这样的标准路由下调用 useScript(‘./tagging.js’)，脚本通常能正常加载。然而，当导航到 /hearing-agency/brand/phonak 这样的动态路由时，尽管 useScript Hook 可能报告脚本状态为 ready，但实际上脚本并未正确执行，并且在控制台会抛出 SyntaxError: Unexpected token ‘
检查文档的
部分，会发现 标签确实被插入了，但其 src 属性在动态路由下似乎未能正确解析。
错误原因分析：相对路径与基准 URL
问题的根本原因在于，当使用相对路径（如 ./tagging.js）来指定脚本源时，浏览器会根据当前页面的 基准 URL (Base URL) 来解析这个相对路径。
- 标准路由 (/offer): 当页面 URL 为 https://yourdomain.com/offer 时，相对路径 ./tagging.js 会被解析为 https://yourdomain.com/tagging.js。
- 动态路由 (/hearing-agency/brand/phonak): 当页面 URL 为 https://yourdomain.com/hearing-agency/brand/phonak 时，相对路径 ./tagging.js 会被解析为 https://yourdomain.com/hearing-agency/brand/tagging.js。
如果你的 tagging.js 文件实际存放在应用的 public 目录（或根目录），那么在动态路由下，浏览器会尝试从 https://yourdomain.com/hearing-agency/brand/tagging.js 加载脚本。由于这个路径通常不存在实际的 tagging.js 文件，服务器可能会返回应用的 index.html 内容（这是单页应用路由的常见配置），浏览器在尝试将 HTML 内容解析为 JavaScript 时，就会遇到 < 符号，从而抛出 SyntaxError: Unexpected token '<' 错误。
解决方案：使用绝对路径
解决这个问题的关键是确保脚本的 URL 始终相对于应用的根目录解析，无论当前路由如何。这可以通过将相对路径改为绝对路径来实现。
将 useScript 的调用从：
useScript('./tagging.js'); // 相对路径修改为：
useScript('/tagging.js'); // 绝对路径或者，如果你的脚本文件名为 dummyscript.js：
useScript('/dummyscript.js'); // 绝对路径通过在路径前添加 /，我们指示浏览器从当前域名的根目录开始解析路径。这样，无论当前页面是 /offer 还是 /hearing-agency/brand/phonak，/tagging.js 都会被正确解析为 https://yourdomain.com/tagging.js，从而确保脚本能够从正确的位置加载。
注意事项与最佳实践
- 统一路径策略: 在 React 应用中动态加载资源（如脚本、图片、字体）时，尤其是在公共文件夹中的资源，推荐始终使用绝对路径（以 / 开头），以避免因路由变化导致的路径解析问题。
- public 目录: 放在 public 目录下的文件在构建时会被直接复制到输出目录的根部，因此它们可以通过 /文件名.js 的形式直接访问。
- BrowserRouter 的 basename: 如果你的 React 应用部署在一个子目录下（例如 https://yourdomain.com/my-app/），并且你使用了 BrowserRouter，那么你可能需要配置 basename 属性：
<BrowserRouter basename="/my-app"> {/* ... 你的路由配置 */}</BrowserRouter>在这种情况下，你的绝对路径 ‘/tagging.js’ 仍会相对于 basename 解析，即 https://yourdomain.com/my-app/tagging.js。
- 错误处理: useScript Hook 中已经包含了错误状态的监听，但在实际应用中，你可能需要更健壮的错误处理机制，例如在脚本加载失败时显示备用内容或记录错误日志。
- 脚本的幂等性: 确保你的脚本在被多次注入时不会产生副作用。useScript Hook 通过 document.querySelector 检查脚本是否已存在，这有助于避免重复插入相同的脚本。
总结
在 React 应用中利用 useScript 等自定义 Hook 动态加载外部脚本时，面对动态路由导致的脚本加载失败问题，其核心原因在于相对路径在不同基准 URL 下的解析差异。通过将脚本路径从相对路径（如 ./tagging.js）修改为绝对路径（如 /tagging.js），可以确保脚本始终从应用根目录正确解析，从而彻底解决 SyntaxError: Unexpected token ‘<' 的问题。采用绝对路径是处理 React 应用中静态资源路径的推荐做法，能够提升应用的健壮性和可维护性。
以上就是React 应用中动态路由下脚本注入失败的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532132.html - public 目录: 放在 public 目录下的文件在构建时会被直接复制到输出目录的根部，因此它们可以通过 /文件名.js 的形式直接访问。
- 动态路由 (/hearing-agency/brand/phonak): 当页面 URL 为 https://yourdomain.com/hearing-agency/brand/phonak 时，相对路径 ./tagging.js 会被解析为 https://yourdomain.com/hearing-agency/brand/tagging.js。
微信扫一扫 
支付宝扫一扫 
