React 应用中引入的第三方脚本（如 jQuery、Waypoints）因相对路径解析失败，导致多级路由（如 /blog/123/post456）下无法加载或执行，需统一改为绝对路径或使用 %PUBLIC_URL% 占位符修复。

react 应用中引入的第三方脚本（如 jquery、waypoints）因相对路径解析失败，导致多级路由（如 `/blog/123/post456`）下无法加载或执行，需统一改为绝对路径或使用 `%public_url%` 占位符修复。

在将传统 HTML/CSS/JS 模板迁移至 React 时，常会将静态资源（如 assets/js/vendor/jquery.js）直接放入 public/ 目录，并通过 <script></script> 标签在 public/index.html 的 中引入。看似简单，却极易因路径解析机制差异引发运行时问题：脚本在根路径 / 或单段路径（如 /blog/123）下正常工作，但在多段嵌套路径（如 /blog/123/post456）下完全失效。

根本原因在于：浏览器对 <script src="assets/js/..."></script> 这类相对路径的解析，是基于当前页面 URL 的路径层级进行拼接的。例如：

• 当访问 http://localhost:3000/ 时，src="assets/js/jquery.js" → 解析为 http://localhost:3000/assets/js/jquery.js ✅
• 当访问 http://localhost:3000/blog/123/post456 时，src="assets/js/jquery.js" → 错误解析为 http://localhost:3000/blog/123/assets/js/jquery.js ❌（404）

React Router 的客户端路由不会触发页面刷新，但浏览器仍会按当前完整 URL 解析相对资源路径——这正是问题症结。

✅ 正确解法：强制使用绝对路径，确保资源始终从 public 根目录加载：

react-best-practices

重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...

下载

<!-- public/index.html 中的 <head> 内 -->
<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 提供的环境变量（兼容构建与开发环境）：

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

⚠️ 注意事项：

• 不要混用相对路径（如 ./assets/... 或 assets/...），它们在深层路由下必然失效；
• 若依赖 jQuery 插件（如 Bootstrap JS），确保其初始化逻辑在 DOM 加载完成后执行，可结合 useEffect 在组件挂载时手动触发（适用于需动态绑定的场景）；
• 长期建议：逐步迁移第三方交互逻辑至 React 原生实现（如用 IntersectionObserver 替代 Waypoints），减少全局脚本依赖，提升可维护性与 SSR 兼容性。

通过统一资源引用路径，即可彻底解决多级路由下第三方 JS 失效问题，无需修改路由配置或额外监听路由变化。