在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 ‘<'的错误。检查HTML头部，脚本标签可能已存在，但其内容并未正确加载。
问题根源：相对路径在动态路由下的解析差异
SyntaxError: Unexpected token ‘<'这个错误通常意味着浏览器尝试将一个HTML文档解析为JavaScript代码。这表明，当脚本加载失败时，服务器返回的不是预期的JavaScript文件，而是一个HTML页面（可能是应用的index.html，或者一个404错误页面）。
问题的核心在于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开发中常见的细微但关键的问题，理解其原理有助于编写更健壮的代码。
以上就是React 应用中动态路由下脚本注入失败的路径解析问题解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/199514.html
微信扫一扫 
支付宝扫一扫 
