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

SPAのスクロールに関するTips
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

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は以下の部分が取れます。公式のリンクを貼っておきます。

pathnameってどこが取れるの?
ここが取れる!

終わりに

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

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

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

ではまた!

 

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる