サイトのルーティングを改善した

React Routerでページ遷移を実装してからというものの、ずっとのこり続けていた問題がありました。どんな問題かと言いますと、ページを遷移した後にスクロールが正しくリセットされず、ページの途中が表示されてしまう、というものです。

この問題を解消しようとReact Routerのドキュメントを見ていたのですが、どうやらv6.4がリリースされていたようで、ちょうどScrollRestorationというコンポーネントが追加されていました。これを早速試そうとした訳なのですが、この機能を使うにはData APIと呼ばれるものに対応したRouterを使わなければならない、ということだったのですが、この移行がかなり手こずりました。

まずReact Router v6.4に関連した情報というのが、公式サイト含め全然ないのです。日本語は勿論ですが、英語の情報ですらあんまり出てきません。まあまだ新しいから仕方がないのかもしれませんが…。React Router v6.4に関しては、分かったことを後日まとめたいと思っています。

React Routerはv6.4でかなり劇的に変わっています。どうやら、Remixというフレームワークで使うことを念頭に置いて作られているみたいです。私も全容を把握できていないのですが、非同期にページを遷移させるための機能が多く見受けられます。加えて、SSRとhydrationのためのAPIが用意されています。ということで、今までと比べてかなりとっつきにくい印象です。使い所を理解すると有用性がわかるのですが、理解するまでのハードルがそれなりに高いです。

当初のスクロールの問題を解決する、という目標はなんとか達成することができました。そこで次にやりたくなったのが、React Transition Groupによる遷移アニメーションです。しかし小一時間の試行錯誤の末、ScrollRestorationと同時に使うと干渉してしまう問題を解決する糸口を見出せませんでした。React Transition Groupは全くもって初めて触ったので、もしかしたらどうにかできるのかもしれませんが、遷移のタイミングがずれてしまって、うまくスクロール位置が設定されないのです。ということで、遷移アニメーションは保留とすることにしました。

スクロールの問題を解決できたので、ひとまず一件落着ということにしておきます。なぜ個人サイトを作るのにここまでしなければならないのか、という話ではあります。ReactでSPAを構成するのがここまで大変だとは思っていませんでした。Next.jsなんかのフレームワークを使うのが良いのかもしれませんが…それは大袈裟にも思えてしまいます。ミニマリスティックな方が私の好みです。