React JS 路由跳转后已加载的JavaScript和CSS不生效问题求助

问题1：public/index.html引入资源，路由导航后功能异常 #

根因 #

• React是单页应用，路由切换时仅替换页面DOM节点，不会重新触发页面全局加载：你在index.html中引入的JS文件只会在首次打开页面时执行一次，路由切换后新渲染的DOM没有绑定JS中定义的事件、初始化逻辑，因此功能失效。
• 若你使用了相对路径引入资源，多级路由下会出现资源路径拼接错误，即使你看到源码中链接一致，实际请求路径可能已经出错。

解决方案 #

• 所有在index.html中引入的静态资源路径统一使用绝对路径，路径开头加/，例如：

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/jquery.min.js"></script>
  

• 依赖DOM初始化的JS逻辑，统一放到对应页面组件的useEffect钩子中执行，路由切换进入页面时重新触发初始化，路由离开时及时销毁绑定的事件，避免内存泄漏。

问题2：资源迁移到src目录后jQuery报错 #

根因 #

jQuery未按照ES模块规范正确导入挂载，依赖全局jQuery变量的逻辑无法找到对应的实例。

解决方案 #

1. 先通过包管理器安装jQuery依赖：

   npm install jquery
   # 或者用yarn
   yarn add jquery
   

2. 在App.js（或者用到jQuery的文件）顶部导入jQuery，并挂载到全局window对象上，兼容依赖全局变量的第三方插件：

   import $ from 'jquery'
   window.$ = window.jQuery = $
   

3. 若仍有第三方jQuery插件报错，可将插件文件放在public目录下，在index.html中jQuery引入之后再引入插件文件，或者安装对应插件的npm版本按规范导入。

注意：React框架自身会通过虚拟DOM管理真实DOM，非必要场景不建议使用jQuery直接操作DOM，否则可能出现数据和视图不一致的问题。如果必须操作DOM，建议通过useRef获取对应真实DOM节点后再进行操作。

内容的提问来源于stack exchange，提问作者Adnan Nawaz