在 react 应用中，使用 usescript 等自定义 hook 动态注入外部脚本时，若脚本路径采用相对形式（如 ./tagging.js），在标准路由下可能正常工作，但在动态路由（如 /brand/:brandname）下会因浏览器解析基准 url 变化而导致脚本加载失败，并抛出 "unexpected token '
理解 React 应用中的脚本动态注入
在现代 React 应用中，我们有时需要动态加载第三方脚本，例如分析工具、广告标签或自定义功能库。为了更好地管理脚本的生命周期和状态，通常会封装一个自定义 Hook，如 useScript。这个 Hook 负责创建、插入 <script> 标签到文档头部，并监听其加载或错误事件，以返回脚本的当前状态（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 配置了动态路由时，例如：
<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 '<' 错误。
检查文档的 <head> 部分，会发现 <script> 标签确实被插入了，但其 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 应用中静态资源路径的推荐做法，能够提升应用的健壮性和可维护性。
