【TurboDrive】Rails 7 でReactとHotwire（Turbo & Stimulus）を同時に使いたいときには、Turbo Driveを無効化しよう！（Turbolinks, React, esbuild, jsbundling-rails）

結論

つまり、JavaScriptのエンドポイントであるapplication.jsに、

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

を書き込んであげればOK!!

Turboを使ってあげたい箇所ではdata: { turbo: true }を書き込んであげましょう。

Turbo Driveを無効化することで、kaminariやlink_toなどの画面遷移後も、きちんとReactが表示されるようになります。

Turboを完全に無効化してしまうと、確認ダイアログなどの機能をReactやVueや素のJavaScriptで実装する必要があり大変です。

しかし、Turboを有効にすると、Turbo Drive（Rails 6時代はTurbolinksと呼ばれていました）が有効になってしまい、画面遷移後にReactが表示されなくなってしまい、困っていました。

Turbo（Hotwire）の良いところも、Reactの良いところも、両方使いたい！　どちらかを選択してどちらかを諦めるのは嫌だ！

そう思って調べたところ、上記の記事を見つけることができ、無事に両方とも使えるようになりました！　ありがとうございます🙏

具体的なコード例については、こちらのPull Requestに上げております！　ぜひ参考にしてみてください✨

質問・雑談タイムでアドバイスをくださった komagata さんに、この場で改めてお礼申し上げたいと思います。ありがとうございました！😊

ブラウザバックやブラウザフォワード（ブラウザ操作における戻るボタンと進むボタンを押す）時に、Reactがうまく読み込めないことがありました（キャッシュが残り最新の状態になっていない）。

この問題を解決する方法は色々ありますが、上記のようにReactとHotwireを共存させている場合、Stimulusを使ってコードを書いてあげるのが便利です。

こちらのリンク先の２つのコードを書いてあげると、Reactが最新の状態に読み込まれるようになるので、とても良い感じになります。

ぜひ参考にしてみてください✨