在React应用中，使用`useScript`钩子注入外部脚本时，若脚本路径采用相对路径（如`./script.js`），在动态路由下可能会因路径解析错误而导致脚本加载失败，表现为`Unexpected token '
理解 React 应用中的脚本注入与路径解析
在现代的单页应用（SPA）如React中，我们经常需要动态地加载第三方脚本或自定义脚本。useScript是一个常见的自定义Hook，用于管理脚本的生命周期，包括加载、卸载以及处理加载状态。然而，当应用中存在动态路由时，脚本的路径解析方式可能会引发意想不到的问题，导致脚本加载失败。
考虑以下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以在路由变化时触发effect
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);
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'));
}
const setStateFromEvent = (event) => {
setStatus(event.type === 'load' ? 'ready' : 'error');
};
script.addEventListener('load', setStateFromEvent);
script.addEventListener('error', setStateFromEvent);
return () => {
if (script) {
script.removeEventListener('load', setStateFromEvent);
script.removeEventListener('error', setStateFromEvent);
}
};
}, [url, location]); // 依赖url和location，确保路由变化时重新评估脚本状态
return status;
};
export default useScript;当我们在组件中使用这个Hook，并传入一个相对路径，例如：
const status = useScript('./tagging.js');在标准路由（如/offer）下，脚本可能正常加载。然而，当切换到动态路由（如/hearing-agency/brand/:brandname，具体实例为/hearing-agency/brand/phonak）时，即使useScript报告状态为ready，控制台却可能出现SyntaxError: Unexpected token '
问题根源：相对路径在动态路由下的解析差异
SyntaxError: Unexpected token '
问题的核心在于useScript Hook中使用的脚本URL是一个相对路径。相对路径的解析是基于当前页面的URL。
- 标准路由示例： 如果当前URL是http://localhost:3000/offer，并且脚本路径是./tagging.js，浏览器会尝试从http://localhost:3000/tagging.js加载脚本。如果tagging.js文件位于React应用的public目录下，通常会成功。
- 动态路由示例： 如果当前URL是http://localhost:3000/hearing-agency/brand/phonak，并且脚本路径仍然是./tagging.js，浏览器会尝试从http://localhost:3000/hearing-agency/brand/tagging.js加载脚本。由于tagging.js通常直接放在public目录下，而不是public/hearing-agency/brand/下，服务器将无法找到该资源，从而返回一个HTML页面（例如，React应用的index.html），导致上述解析错误。
解决方案：使用根相对路径
为了确保脚本无论在哪个路由下都能正确加载，我们应该使用根相对路径（或称为绝对路径，相对于域名根目录）。这意味着脚本URL应该以/开头。
将脚本注入的调用从：
useScript('./tagging.js'); // 问题所在：相对路径修改为：
useScript('/tagging.js'); // 解决方案：根相对路径这样修改后：
- 无论当前URL是http://localhost:3000/offer还是http://localhost:3000/hearing-agency/brand/phonak，浏览器都会尝试从http://localhost:3000/tagging.js加载脚本。
- 只要tagging.js文件位于React应用的public目录下，它就能被正确找到并加载，从而避免Unexpected token '
注意事项与最佳实践
- 文件位置： 确保你想要注入的脚本文件（例如tagging.js）确实放置在React项目的public目录下。在构建过程中，public目录下的文件会被直接复制到构建输出的根目录。
- CDN 或外部 URL： 如果脚本是从CDN或其他外部服务加载，则应直接使用其完整的绝对URL（例如https://example.com/some-script.js），这种情况下不会受到应用内部路由的影响。
- process.env.PUBLIC_URL： 对于部署在非根路径下的React应用（例如http://example.com/my-app/），使用/tagging.js可能会导致问题，因为它仍然指向域名根目录。在这种情况下，可以考虑使用process.env.PUBLIC_URL来构建路径，例如useScript(${process.env.PUBLIC_URL}/tagging.js)。但对于大多数部署在根路径下的应用，/tagging.js是足够且更简洁的。
- 错误处理： useScript Hook已经包含了基本的错误处理机制（通过setStatus('error')），这对于调试和用户体验是很有帮助的。当脚本加载失败时，组件可以根据status显示友好的错误信息。
总结
在React应用中使用useScript等自定义Hook动态注入脚本时，务必注意脚本路径的类型。相对路径（以./或不带/开头）会根据当前路由进行解析，这在动态路由场景下极易引发资源加载错误。通过使用根相对路径（以/开头），可以确保脚本始终从应用的基础URL正确加载，从而避免因路径解析问题导致的脚本注入失败。这是一个在SPA开发中常见的细微但关键的问题，理解其原理有助于编写更健壮的代码。
