Rails 7.0.4.2项目使用link_to跳转后JS元素失效问题求助

核心原因 #

Rails 7 默认使用 Turbo 替代了旧版TurboLinks，页面跳转通过渐进式渲染实现，不会重新加载整个页面。AdminKit的初始化JS仅在页面首次加载时执行，Turbo跳转后的新页面不会触发这些逻辑，导致图标、侧边栏等交互功能失效。

解决方案 #

1. 禁用特定链接的Turbo

给link_to添加data: { turbo: false }属性，强制触发整页刷新，确保AdminKit的JS重新初始化：

link_to "目标页面", target_path, data: { turbo: false }

若需全局禁用Turbo（不推荐，会丢失Turbo性能优势），可在application.html.erb的<head>中添加：

<meta name="turbo-visit-control" content="reload">

2. 绑定AdminKit初始化逻辑到Turbo事件

找到AdminKit的初始化代码（通常在app/javascript/controllers或自定义JS文件中），将其绑定到Turbo的turbo:render事件，确保每次页面渲染后重新初始化：

// 假设AdminKit初始化函数为initAdminKit()
document.addEventListener('turbo:render', function() {
  initAdminKit();
});

若不确定初始化函数名，可查看项目JS文件或AdminKit文档，找到侧边栏、图标等组件的初始化代码块，将其移入Turbo事件回调。

3. 检查资源加载配置

确保AdminKit的JS/CSS在Turbo跳转后能正确加载：

• 用Importmap的话，确认config/importmap.rb已引入依赖：

  pin "admin-kit", to: "admin-kit.js"
  

• 用Webpacker的话，检查app/javascript/packs/application.js是否导入AdminKit：

  import "admin-kit";
  

4. 修复图标加载异常

图标不显示多因Turbo跳转后字体文件未重新加载或图标初始化逻辑未执行：

• 确保application.css中正确引入图标字体：

  @import "admin-kit/icons";
  

• 在turbo:render事件中重新初始化图标组件（若AdminKit提供对应方法）。

验证步骤 #

1. 给测试链接添加data: { turbo: false }，确认跳转后功能恢复，排除Turbo影响。
2. 逐步测试Turbo事件绑定方案，确保初始化逻辑在每次页面渲染后执行。
3. 查看浏览器控制台报错，定位未加载的JS模块或初始化失败的具体原因。

内容的提问来源于stack exchange，提问作者Vedant Joshi