ページ遷移におけるvanillaなアンカータグとreact-router-domのLinkタグの違いについて

こんにちわ。nap5です。

前回同様、ページ遷移時のトランジション方法の一つを紹介したいと思います。今回のポイントはルーティングの挙動の違いがエフェクトに影響を与えるということです。

vanillaなアンカータグとreact-router-domのLinkタグの違いです。

デモコードをcodesanboxに置きました。

hungry-stallman-vrcv9s - CodeSandbox

結論から言うと、アンカータグを使わないとページのリロードが走らないので、エフェクトを生かすサイト制作の際にはvanillaなアンカータグを選択しないといけないです。ただ、もしかしたら別の方法はあるかもしれません。
おそらく無理くりカスタマイズしないといけないような気もします。。。

デモでは2つのリンクを置きました。それぞれ、vanillaなアンカータグとreact-router-domのLinkタグです。

確かめるにあたり、以下のレポジトリのコードをもとに少しリファクタリングしました。

https://github.com/wrongakram/pageloader

GitHub - wrongakram/pageloader

デモ動画はこちらになります。

Loom | Send a video. Not a thousand words.

画像については以下のサイトからリンクしています。

Cowboy Bebop GIFs - Find & Share on GIPHY

簡単ですが、以上です。