React JS と Lenis のスムーズスクロールで画面を切り替えるときにトップに戻る方法

Question

スムーズなスクロールを実現するために lenis を使用しており、App.js で使用する ScrollToTop.js ファイルがあります。ページがスクロールしていないときは正常に動作しますが、別のページに移動するボタンをクリックして「スムーズなスクロール」が発生すると、scrollToTop が動作しません。これを修正する方法を知っている人はいますか?

ScrollToTop.js

import { useEffect } from "react";
「react-router-dom」からインポート { useLocation };
"gsap" から { gsap } をインポートします。
import { 色 } から "./constants";

デフォルト関数 ScrollToTop() をエクスポート {
   const { パス名 } = useLocation();
   const body = document.querySelector("body");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { 継続時間: 0, 背景色: color.white });
   }, [パス名]);

  null を返します。
}

すべてのページで useLayoutEffect を使用してみましたが、機能しません

Answer 1

他の人が指摘したように、Routes コンポーネントを ScrollToTop コンポーネントでラップしていますが、実際には何もレンダリングしないことを特に考慮して、編集して暗黙の子プロパティをレンダリングするのではなく、React フックに変換することをお勧めします。 、ナビゲーションの副作用として実行したいとします。