React 应用中通过 标签引入的第三方 JS 因相对路径解析错误，在 /param1/param2 等多段路由下无法加载，需统一改用绝对路径或 PUBLIC_URL 变量确保资源正确解析。
react 应用中通过 `<script>` 标签引入的第三方 js 因相对路径解析错误，在 `/param1/param2` 等多段路由下无法加载，需统一改用绝对路径或 `public_url` 变量确保资源正确解析。</script>
在将传统 HTML/CSS/JS 模板迁移至 React 时，开发者常将静态资源（如 jQuery、Waypoints、Bootstrap Bundle）直接放入 public/assets/ 目录，并在 public/index.html 的 中以相对路径引用：
<script src="assets/js/vendor/jquery.js"></script> <script src="assets/js/vendor/waypoints.js"></script> <!-- ... -->
这种方式在根路径（/）或单参数路径（如 /blog/1）下看似正常，但一旦访问 /blog/1/detail 这类含两个及以上 URL 段的路径，浏览器会基于当前页面 URL 解析相对路径——例如在 http://localhost:3000/blog/1/detail 下，src="assets/js/jquery.js" 将被错误解析为 http://localhost:3000/blog/1/assets/js/jquery.js，导致 404 加载失败。
✅ 正确做法是强制使用绝对路径，确保资源始终从 public 根目录加载：
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
<!-- 方案一：显式绝对路径（推荐用于开发与生产环境一致的简单场景） --> <script src="/assets/js/vendor/jquery.js"></script> <script src="/assets/js/vendor/waypoints.js"></script> <script src="/assets/js/bootstrap-bundle.js"></script> <script src="/assets/js/main.js"></script>
或更优地，使用 create-react-app 内置的 %PUBLIC_URL% 占位符（构建时自动替换为正确的公共路径，兼容 homepage 配置和子路径部署）：
<!-- 方案二：使用 PUBLIC_URL（强烈推荐） --> <script src="%PUBLIC_URL%/assets/js/vendor/jquery.js"></script> <script src="%PUBLIC_URL%/assets/js/vendor/waypoints.js"></script> <script src="%PUBLIC_URL%/assets/js/bootstrap-bundle.js"></script> <script src="%PUBLIC_URL%/assets/js/main.js"></script>
⚠️ 注意事项：
- 不要将第三方 JS 放入
src/目录并尝试import—— 这些库通常依赖全局window.jQuery或 DOM 就绪状态，且可能与 React 的声明式渲染冲突； - 若脚本需在每次路由切换后重执行（如初始化滚动动画、菜单高亮），应在对应组件中通过
useEffect+document.getElementById()或自定义 Hook 主动调用其初始化函数，而非依赖全局 script 标签的“一次性执行”； -
public/index.html中的<script></script>标签仅在首次加载页面时执行一次，不会随 React Router 的客户端导航（如<link>跳转）重新触发，因此路径修复是前提，动态行为需额外处理。
总结：路径问题本质是浏览器对相对 URL 的解析机制所致，与 React Router 本身无关。统一使用 /assets/... 或 %PUBLIC_URL%/assets/... 即可彻底解决多级路径下的资源加载失败问题，是迁移传统模板到 React 的关键实践之一。
