使用Turbo Frame时，表单提交成功后如何重新加载整个页面？

问题分析 #

Turbo默认会拦截表单提交请求，即便控制器返回redirect_to，也会尝试将目标页面内容加载到发起请求的Turbo Frame中，导致无法触发全页面跳转。

可复用解决方案 #

方案1：返回Turbo Stream重定向指令 #

在控制器的create方法中，验证通过后返回Turbo Stream指令明确触发全页跳转，这种方式对Turbo友好且易于复用：

修改控制器代码：

def create
  @project_form = ProjectForm.new project_params
  if @project_form.valid?
    command_bus.(Conversations::Commands::CreateProject.new(id: SecureRandom.uuid,
                                                        title: @project_form.title))

    respond_to do |format|
      format.html { redirect_to projects_url }
      format.turbo_stream do
        render turbo_stream: turbo_stream.redirect(projects_url)
      end
    end
  else
    # 保留原验证失败逻辑，渲染带错误的表单
    render :new
  end
end

方案2：封装控制器Concern实现全局复用 #

如果多个控制器都有类似需求，可封装成Concern避免重复代码：

1. 创建app/controllers/concerns/turbo_redirectable.rb：

module TurboRedirectable
  extend ActiveSupport::Concern

  def turbo_redirect_to(url, **options)
    respond_to do |format|
      format.html { redirect_to url, **options }
      format.turbo_stream do
        render turbo_stream: turbo_stream.redirect(url), **options
      end
    end
  end
end

2. 在目标控制器中引入并使用：

class ProjectsController < ApplicationController
  include TurboRedirectable

  def create
    @project_form = ProjectForm.new project_params
    if @project_form.valid?
      command_bus.(Conversations::Commands::CreateProject.new(id: SecureRandom.uuid,
                                                          title: @project_form.title))

      # 调用封装好的重定向方法
      turbo_redirect_to projects_url
    else
      render :new
    end
  end
end

方案3：表单属性强制全页提交（不推荐） #

若不想修改控制器，可在表单上添加属性让Turbo替换整个页面，但需逐个表单设置，复用性弱：

= turbo_frame_tag 'new_project' do
  = simple_form_for @project_form, url: projects_path, html: { data: { turbo_action: "replace" } } do |form|
    ...

推荐方案 #

优先选择方案2，通过封装Concern实现全局复用，既保留Turbo的特性，又能统一处理成功后的全页重定向需求。

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