通过Webpacker引入Bootstrap后Rails Destroy删除链接失效

删除链接失效的核心原因是配置Webpacker时遗漏了Rails UJS（非侵入式JavaScript）的引入与初始化。
Rails中给link_to添加method: :delete、data: { confirm: '提示文案' }实现非GET请求、确认弹窗的功能，完全依赖Rails UJS脚本拦截链接默认点击行为：它会自动构造携带_method=delete参数的POST请求、弹出确认框，同时自动携带CSRF令牌完成合法请求。
你将Webpacker源码路径从默认的app/javascript修改为app/frontend后，新建的JS入口文件只引入了Bootstrap相关脚本，完全没有加载Rails UJS，因此浏览器会按照普通链接的默认逻辑发起GET请求，直接跳转至记录详情页，对应服务端日志里路由到EmergencyContactsController#show的现象。

• 第一步：安装Rails UJS依赖，在项目根目录终端执行命令：

yarn add @rails/ujs

• 第二步：修改app/frontend/packs/application.js，在所有其他JS引入前添加Rails UJS的初始化代码，修改后完整内容如下：

// 新增以下两行Rails UJS初始化代码，必须放在其他脚本引入之前
import Rails from '@rails/ujs';
Rails.start();

import '../js/bootstrap_js_files.js'

• 第三步（可选，解决Turbo/Turbolinks下Bootstrap组件偶发失效问题）：在app/frontend/js/bootstrap_js_files.js末尾添加兼容代码，避免页面切换后下拉、折叠组件失效：

// 兼容Turbo/Turbolinks页面缓存，防止Bootstrap组件重复初始化失效
document.addEventListener("turbo:load", () => {
  document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => new bootstrap.Dropdown(el))
  document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => new bootstrap.Collapse(el, {toggle: false}))
})

• 第四步：重启Rails服务，清理浏览器缓存后刷新页面测试即可。

修复后点击Destroy链接会首先弹出确认提示框，确认提交后服务端日志会显示收到带_method=delete参数的POST请求，路由到EmergencyContactsController#destroy动作执行删除逻辑，不会再跳转至详情页。

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