Rails7においてページをリロードしないとjavascriptが動かない

はじめに

現在Rails7でアプリケーションを開発している。
javascriptでタブと画像プレビューを実装したが、ページをリロードしないとjavascriptが動かない問題に直面した。
いろいろ検索しているとturbolinksが原因であるということは分かった。
解決方法はいくつか見つかるがどれを試してもなかなか解決しなかったため、備忘録として投稿。

Qiitaの記事などでよく見られた解決策

1.link_to ごとにturbolinksを無効にする

html.erb

<%= link_to "hoge", root_path, data: {"turbolinks" => false} %>

2.jsファイルに"turbolinks:load"を記述する

.js

document.addEventListener("turbolinks:load", function() {
  //略
})

この二つの解決方法が多く見つかった。
実際に試してみるがどちらも解決に至らず、2に至ってはリロードしても動作しなくなってしまった。

実際の解決方法

application.jsの内容を書き換える

application.js

import "@hotwired/turbo-rails"
//以下略

上記の一文を

application.js

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
//以下略

このように書き換える。

終わりに

turbolinksについてはまだまだ理解が不十分であり、解決策も対処療法的になってしまっている。
これを機にturbolinksについて理解を深めたいと思う。