如何在React JS和Lenis平滑滾動中切換螢幕時滾動回頂部

Question

我正在使用lenis來實現平滑滾動，並且我有一個ScrollToTop.js文件，我在我的App.js中使用它。當頁面沒有滾動時，它運行得很好，但是當我點擊一個按鈕，將我帶到另一個頁面時，“平滑滾動”正在發生時，scrollToTop不起作用，有人知道如何解決這個問題嗎？

ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { gsap } from "gsap";
import { colors } from "./constants";

export default function ScrollToTop() {
   const { pathname } = useLocation();
   const body = document.querySelector("body");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { duration: 0, backgroundColor: colors.white });
   }, [pathname]);

  return null;
}

我已經嘗試在每個頁面中使用useLayoutEffect，但不起作用

Answer 1

正如其他人指出的那樣，您正在使用ScrollToTop元件包裝您的Routes元件，但是我建議將其轉換為React鉤子，而不是編輯它以呈現其隱式children屬性，特別是考慮到它實際上並不呈現任何內容，您希望它作為導航的副作用來運作。