React JS 및 Lenis의 부드러운 스크롤에서 화면을 전환할 때 맨 위로 스크롤하는 방법

Question

부드러운 스크롤을 위해 lenis를 사용하고 있으며 App.js에서 사용하는 ScrollToTop.js 파일이 있습니다. 페이지가 스크롤되지 않을 때는 제대로 작동하지만 다른 페이지로 이동하는 버튼을 클릭하고 "부드러운 스크롤"이 발생하면 scrollToTop이 작동하지 않습니다. 이 문제를 해결하는 방법을 아는 사람이 있습니까?

ScrollToTop.js

"반응"에서 { useEffect }를 가져옵니다.
"react-router-dom"에서 import { useLocation };
"gsap"에서 { gsap }을 가져옵니다.
"./constants"에서 { 색상 }을 가져옵니다.

기본 함수 ScrollToTop() 내보내기 {
   const { 경로명 } = useLocation();
   const body = document.querySelector("body");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { 지속 시간: 0, backgroundColor: colors.white });
   }, [경로명]);

  null을 반환;
}

모든 페이지에서 useLayoutEffect를 사용해 보았지만 작동하지 않습니다

Answer 1

다른 사람들이 지적했듯이 Routes 구성 요소를 ScrollToTop 구성 요소로 래핑하고 있지만 암시적 하위 속성을 렌더링하도록 편집하기보다는 React 후크로 변환하는 것이 좋습니다. 특히 실제로는 렌더링하지 않는 콘텐츠를 고려하면 더욱 그렇습니다. 탐색의 부작용으로 실행되기를 원합니다.