本文深入探讨了在react应用中使用自定义`usescript` hook进行外部脚本注入时，在动态路由下可能遇到的“unexpected Token ‘
在现代react应用开发中，有时我们需要动态地加载外部JavaScript脚本，例如第三方分析工具、广告SDK或自定义的客户端脚本。为了更好地管理脚本的生命周期和状态，通常会封装一个自定义的Hook，如useScript。然而，当应用中存在动态路由时，这种脚本注入方式可能会遇到意想不到的问题。
理解 useScript Hook的工作原理
我们首先来看一个常见的useScript Hook实现，它负责将脚本动态添加到HTML文档的<head>中，并管理其加载状态：
import { useEffect, useState } from 'react' import { useLocation } from 'react-router-dom' // 注意：此处的useLocation在问题中被使用，但在解决方案中并不直接相关 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 script.setAttribute('data-status', 'loading') // 初始化状态 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')) } // 定义事件监听器，用于更新React组件的状态 const setStateFromEvent = (event) => { setStatus(event.type === 'load' ? 'ready' : 'error') } // 监听脚本的加载和错误事件 script.addEventListener('load', setStateFromEvent) script.addEventListener('error', setStateFromEvent) // 清理函数：在组件卸载或url/location变化时移除事件监听器 return () => { if (script) { script.removeEventListener('load', setStateFromEvent) script.removeEventListener('error', setStateFromEvent) } } }, [url]) // 移除location依赖，因为它不是问题的根源，且可能导致不必要的重渲染 return status } export default useScript
这个useScript Hook通过useEffect在组件挂载时或url变化时执行脚本注入逻辑。它会检查脚本是否已存在，如果不存在则创建<script>标签并将其添加到document.head中。同时，它会监听load和error事件来更新脚本的加载状态。
问题分析：动态路由与相对路径的冲突
当我们在React组件中使用这个Hook，并传入一个相对路径的脚本URL时，例如：
const status = useScript('./tagging.js'); console.log(status);
在标准路由（如 /offer 或 /hearing-agency）下，脚本可能正常加载。但在使用动态路由（如 /hearing-agency/brand/:brandname，具体到 /hearing-agency/brand/phonak）时，尽管useScript Hook报告脚本状态为“ready”，但浏览器控制台却会抛出SyntaxError: Unexpected token ‘<‘的错误。
错误根源：相对路径的解析差异
问题的核心在于脚本URL ./tagging.js 是一个相对路径。浏览器在解析相对路径时，会根据当前页面的URL来确定最终的资源路径。
-
标准路由示例： 如果当前URL是 http://localhost:3000/offer
- 浏览器会将 ./tagging.js 解析为 http://localhost:3000/tagging.js。
- 如果 tagging.js 文件位于应用的 public 目录下，服务器会正确响应此文件。
-
动态路由示例： 如果当前URL是 http://localhost:3000/hearing-agency/brand/phonak
- 浏览器会将 ./tagging.js 解析为 http://localhost:3000/hearing-agency/brand/tagging.js。
- 然而，通常情况下，你的tagging.js文件并不存在于 public/hearing-agency/brand/ 路径下。当服务器收到对 http://localhost:3000/hearing-agency/brand/tagging.js 的请求时，它很可能无法找到该文件。
- 在单页应用（SPA）中，服务器通常配置为对所有未知路径返回应用的 index.html 文件。因此，浏览器实际上收到的不是JavaScript代码，而是你的 index.html 文件的内容。
- 当浏览器尝试将 index.html 的内容（以 <!DOCTYPE html> 或 <html 开头）解析为JavaScript时，它会遇到 Unexpected token ‘<‘ 错误，因为JavaScript不期望在文件开头出现HTML标签。
这就是为什么脚本“显示加载”但实际“失败”的原因：它加载了HTML文件，而不是预期的JavaScript文件。
解决方案：使用绝对路径
解决此问题的关键是确保脚本的URL始终相对于应用的根目录解析，无论当前路由如何。这可以通过使用绝对路径来实现。
将useScript的调用从相对路径改为以斜杠 / 开头的绝对路径：
// 原始的、有问题的调用 // const status = useScript('./tagging.js'); // 修正后的调用：使用绝对路径 const status = useScript('/tagging.js'); console.log(status);
通过将 url 参数修改为 ‘/tagging.js’，浏览器总是会从应用的根目录（例如 http://localhost:3000/tagging.js）请求脚本，从而避免了动态路由带来的路径解析问题。
最佳实践与注意事项
-
脚本文件位置： 确保你的 tagging.js 文件放置在React项目的 public 文件夹中。这样，在构建时，它会被正确地复制到输出目录的根部，并且可以通过 /tagging.js 路径访问。
-
考虑 PUBLIC_URL： 如果你的React应用不是部署在Web服务器的根目录下（例如，部署在 http://example.com/my-app/），那么简单地使用 /tagging.js 可能仍然会导致问题，因为它会解析到 http://example.com/tagging.js。在这种情况下，你应该使用 process.env.PUBLIC_URL 来构造路径：
const status = useScript(process.env.PUBLIC_URL + '/tagging.js');
process.env.PUBLIC_URL 在Create React App项目中会自动设置为 package.json 中 homepage 字段的值，或者在没有设置时为空字符串，从而确保路径的正确性。
-
useScript Hook的健壮性：
- 错误处理： 确保useScript Hook能捕获脚本加载失败的错误，并能向组件报告。当前的实现已经包含了对error事件的监听，这是很好的实践。
- 幂等性： 确保即使多次调用useScript Hook，也不会重复添加同一个脚本。当前的document.querySelector检查已很好地处理了这一点。
- 依赖项优化： 在useEffect的依赖数组中，如果location状态的变化不直接影响脚本的URL或加载逻辑，可以将其移除，以避免不必要的重渲染或脚本重新加载。在本案例中，url是唯一的关键依赖。
总结
在React应用中动态注入外部脚本时，特别是在涉及动态路由的场景下，理解相对路径和绝对路径的解析机制至关重要。SyntaxError: Unexpected token ‘<‘ 错误通常是由于浏览器尝试将服务器返回的HTML内容解析为JavaScript而引起的。通过将脚本的URL从相对路径修改为绝对路径（例如，从 ./tagging.js 到 /tagging.js），可以确保脚本始终从正确的根目录位置加载，从而避免这类常见的注入失败问题。对于部署在非根目录的应用，结合 process.env.PUBLIC_URL 可以进一步增强路径处理的健壮性。