如何正确使用Turbo Frames？解决Rails页面无刷新渲染及匹配错误

报错原因 #

当你给链接添加data-turbo-frame="main"后，Turbo会发起请求并在响应内容中寻找id="main"的<turbo-frame>元素，用它替换当前页面的对应frame。如果响应里找不到这个元素，就会抛出该错误。

解决方案 #

方案1：在目标页面显式包裹匹配的Turbo Frame

直接在about.html.erb的最外层添加turbo_frame_tag :main，确保响应内容包含匹配的frame：

<%= turbo_frame_tag :main do %>
  <h1>关于我们</h1>
  <p>这里是关于页面的内容</p>
  <!-- 其他页面内容 -->
<% end %>

这样Turbo就能在响应中找到对应的frame，完成无刷新替换。注意：如果你的布局application.html.erb里已经有<turbo-frame id="main">包裹yield，这样会导致frame嵌套，这种情况下建议选择方案2。

方案2：针对Turbo请求返回无布局内容

修改PagesController中的about动作，当检测到Turbo请求时，不渲染全局布局，只返回页面核心内容：

def about
  if turbo_request?
    render layout: false
  end
end

此时about.html.erb只需编写页面内容（不需要包裹frame）：

<h1>关于我们</h1>
<p>这里是关于页面的内容</p>

Turbo会自动将这段内容替换到当前页面的main Turbo Frame中，无需额外包裹frame元素。

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