2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TurbolinksでpushStateするには

Last updated at Posted at 2020-06-30

JavaScriptでURLを変更し、ブラウザーではページ遷移しないようにするには、history.pushStateを使います。Turbolinksが動いている環境でpushStateを使うと、ブラウザーの進む/戻るで挙動がおかしくなります。Turbolinks以外がpushStateしたときページでは、popstateイベントをTurbolinksが処理しないからです。

Aページ -(pushState)-> Bページ -(リンク)-> Cページ -(戻るボタン)-> URLはBだけど画面が変わらない

Turbolinksを使っているときは、次のようにします。/users?name=Taro に戻ると、turbolinks:load イベントが発火するようになります。

let path = "/users?name=Taro";
Turbolinks.controller.
  pushHistoryWithLocationAndRestorationIdentifier(path, Turbolinks.uuid());

参考: Manage browser history manually for one part of my Turbolinks-enabled Rails 5 app - Stack Overflow

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?