Turbo-Rails：为何在application布局中添加Turbo Frame会报错？

操作复现 #

错误场景步骤 #

1. 执行命令行操作：

rails new test-turbo
rails g controller Home index

2. 在config/routes.rb添加路由：

resources :home, only: [:index]

3. 修改app/views/layouts/application.html.erb，用Turbo Frame包裹<%= yield %>：

<body>
  <%= turbo_frame_tag :foobar do %>
    <%= yield %>
  <% end %>
</body>

4. 在app/views/home/index.html.erb添加链接：

<%= link_to "Link to this page", home_index_path %>

点击链接后，出现Turbo Frame错误提示（内容缺失）。

正常场景步骤 #

将Turbo Frame标签移至app/views/home/index.html.erb中：

<%= turbo_frame_tag :foobar do %>
  <h1>Home#index</h1>
  <p>Find me in app/views/home/index.html.erb</p>
  <%= link_to "Link to this page", home_index_path %>
<% end %>

此时点击链接，页面正常更新，无错误提示。

核心原因解析 #

Turbo Frame的核心工作逻辑是：当点击Turbo驱动的链接时，若链接位于某个Turbo Frame内部，Turbo会默认以该Frame为目标，向服务器发起请求，并期望在响应内容中找到与目标Frame同名的Turbo Frame元素，随后用该元素的内容替换当前页面的对应Frame内容。

在错误场景中：

• 链接位于布局层的foobar Frame内部，点击链接时Turbo会发送带有Turbo-Frame: foobar的请求头，告知服务器仅需返回该Frame的内容。
• Rails收到该请求头后，会尝试查找home/index_foobar.html.erb这类针对性模板，但由于不存在该模板，服务器最终返回完整的页面HTML。
• Turbo在解析完整页面响应时，会尝试提取目标Frame，但此时响应中的foobar Frame是布局层的容器，其内部仅包含链接（无嵌套的同名Frame），Turbo无法找到符合要求的替换目标，因此抛出“内容缺失”的错误。

在正常场景中：

• Turbo Frame位于视图层，点击链接时，服务器返回的完整页面中包含明确的foobar Frame元素（视图层定义的Frame），Turbo可以直接匹配到该Frame，并用其内容完成当前页面Frame的替换，因此正常运行。

补充解决方案 #

可通过双Turbo Frame的方式实现跨页面持久化Frame的需求，配置后可实现页面顶部导航栏持久化、内容区域正常更新的效果。

内容的提问来源于stack exchange，提问作者a-lavis