React 应用中动态路由下脚本注入失败的路径解析问题解析

在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。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

• 标准路由示例： 如果当前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 '<'的错误。

注意事项与最佳实践

1. 文件位置： 确保你想要注入的脚本文件（例如tagging.js）确实放置在React项目的public目录下。在构建过程中，public目录下的文件会被直接复制到构建输出的根目录。
2. CDN 或外部 URL： 如果脚本是从CDN或其他外部服务加载，则应直接使用其完整的绝对URL（例如https://example.com/some-script.js），这种情况下不会受到应用内部路由的影响。
3. 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是足够且更简洁的。
4. 错误处理： useScript Hook已经包含了基本的错误处理机制（通过setStatus('error')），这对于调试和用户体验是很有帮助的。当脚本加载失败时，组件可以根据status显示友好的错误信息。

总结

在React应用中使用useScript等自定义Hook动态注入脚本时，务必注意脚本路径的类型。相对路径（以./或不带/开头）会根据当前路由进行解析，这在动态路由场景下极易引发资源加载错误。通过使用根相对路径（以/开头），可以确保脚本始终从应用的基础URL正确加载，从而避免因路径解析问题导致的脚本注入失败。这是一个在SPA开发中常见的细微但关键的问题，理解其原理有助于编写更健壮的代码。

以上就是React 应用中动态路由下脚本注入失败的路径解析问题解析的详细内容，更多请关注php中文网其它相关文章！