Turbolinks to Turbo 升级破坏了表单重定向

如何解决Turbolinks to Turbo 升级破坏了表单重定向

我正在尝试从 Turbolinks 升级到 Turbo，但我发现客户端没有为表单提交呈现重定向。

版本：

• 导轨 6.1.4
• hotwire-rails 0.1.2
• @hotwired/turbo-rails 7.0.0-beta.8

我暂时忽略了 Turbo 和 Devise 之间的不兼容性 - 只是试图让常规表单正常工作，而不必对其禁用 Turbo。

这是一个示例操作：

def update
  authorize @label
  @label.update(label_params)
  if @label.save
    redirect_to document_labels_path(document_id: @document.id)
  else
    render :new,status: :unprocessable_entity
  end
end

这是一个渲染的表单：

<form class="simple_form new_label" id="label_form" novalidate="novalidate" action="/documents/72/labels" accept-charset="UTF-8" method="post">
...
</form>

提交有效表单时，服务器会说 Processing by LabelsController#create as TURBO_STREAM 并正确提供 302。然后它会为重定向位置提供 200。然而，浏览器只会查看提交的表单。将重定向状态更改为 303 不会改变任何内容。

我为每个 Turbo 事件添加了一个 console.log：

document.addEventListener("turbo:load",function () {
  console.log('TURBO:LOAD')
})
document.addEventListener("turbo:click",function () {
  console.log('TURBO:CLICK')
})
document.addEventListener("turbo:before-visit",function () {
  console.log('TURBO:BEFORE-VISIT')
})
document.addEventListener("turbo:visit",function () {
  console.log('TURBO:VISIT')
})
document.addEventListener("turbo:submit-start",function () {
  console.log('TURBO:SUBMIT-START')
})
document.addEventListener("turbo:before-fetch-request",function () {
  console.log('TURBO:BEFORE-FETCH-REQUEST')
})
document.addEventListener("turbo:before-fetch-response",function () {
  console.log('TURBO:BEFORE-FETCH-RESPONSE')
})
document.addEventListener("turbo:submit-end",function (event) {
  console.log('TURBO:SUBMIT-END')
  // event.detail
})
document.addEventListener("turbo:before-cache",function () {
  console.log('TURBO:BEFORE-CACHE')
})
document.addEventListener("turbo:before-stream-render",function () {
  console.log('TURBO:BEFORE-STREAM-RENDER')
})
document.addEventListener("turbo:render",function () {
  console.log('TURBO:RENDER')
})

这是成功提交表单的输出：

TURBO:BEFORE-FETCH-REQUEST
TURBO:SUBMIT-START
TURBO:BEFORE-FETCH-RESPONSE
TURBO:SUBMIT-END

没有渲染事件。调查 event.detail.fetchResponse.response 的 turbo:submit-end 似乎很清楚客户端应该重定向，但它没有。

Response {type: "basic",url: "http://lvh.me:3000/documents/72/labels",redirected: true,status: 200,ok: true,…}
body: (...)
bodyUsed: true
headers: Headers {}
ok: true
redirected: true
status: 200
statusText: "OK"
type: "basic"
url: "http://lvh.me:3000/documents/72/labels"
__proto__: Response

解决方法

这里发生的事情是您的应用程序指定它更喜欢涡轮流响应而不是文本/html 响应。如果您要查看重定向页面的请求标头，您可能会看到以下内容：

Accept: text/vnd.turbo-stream.html,text/html,application/xhtml+xml

因此，Rails 返回具有它识别的第一种类型的数据，即 text/vnd.turbo-stream.html。您浏览器中的 Turbo 会看到这一点，并且由于它无法解释为 Turbo Stream，因此无助地将其忽略。

解决方案（解决方法？）是确保您重定向到页面的 html 版本：

redirect_to document_labels_path(document_id: @document.id,format: :html)

这将返回 Content-Type 为 text/html 的页面，Turbo 将用内容替换整个页面。