React SPAでスクロールが保持されることの改善

ReactでSPAを作成しているときに地味に気になってしまう部分の解消法です。react-routerを使っているときに、コンポーネントの切り替え時に前のスクロールが保持されていて困ったことありませんか？それを解決するための種について書きました。ここからカスタマイズして、要件に合わせて実装しましょう。

本題とは全く関係ありません..

どもども！12月が一週間始まってしまっていますね。年末の絶妙な忙しさにやられかけている龍ちゃんです。最近は、DockerとGitHub Actionsと戯れながら、デザインとフロントのコード、PythonでGUIを作成する日々です。主に3つの仕事をやりくりしています。結構激しめなスケジュールであることもあり、今週はしっかりお仕事しています。

さて、フロントのコードを書いていた時に昔のコードを眺めていて、ブログに乗せていないコードがあったので記述していきます。フロントのコーディングをするときは、検証したコードを参考にコーディングをしています。最近は、そこにChatGPTが入ってきて開発効率が上がりました。その辺のアンテナが弱いので、アンテナ強い人にすり寄っていきますね。

React SPAでスクロールが保持される

さて、本題です。今回は、「ReactでSPA（react-router）を作成しているときに、ページ遷移でスクロールが保持されるから、一番上に持っていきたい」というシナリオを解消するためのコードになります。

特に話すこともないので、コードになります。

const ScrollTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
    console.debug(pathname);
  }, [pathname]);
};

このコンポーネントをスクロールを保持したくないページに仕込むだけです。例えば、<Routes>が定義されているファイルで、こちらのコンポーネントを使用すると、SPAで定義したすべての場所で、スクロールが一番上に行きます。

最上位のコンポーネントで定義しておいて、pathnameの条件分岐でも同等のことが実現できます。その辺はお好みということでよろしくお願いします。ちなみにpathnameは以下の部分が取れます。公式のリンクを貼っておきます。

終わりに

日常的に使いそうなコードは、まとめてブログに挙げておけば自分リファレンスとして使うことができる！

ということを考えていました。そういえば、最近GitのIDを変更することがあったのですが、すんごく面倒だったので作成の時は、変な名前を付けないことが無難ですね。さてさて、最近はReact Springに少し入門していたのでその辺を頑張って記事にします。やっていることがそれぞれの方向を向きすぎて、フロントのこと書いて、GitHub Actionsの記事を書いて大忙しです。来週はPythonの記事も出る予定ですｗ

週末は出張なので、出張レポをまた上げますね( *´艸｀)【京都レポ】【広島レポ】

ではまた！

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube