Cara untuk menatal kembali ke atas apabila menukar skrin dalam React JS dan penatalan lancar Lenis

Question

Saya menggunakan lenis untuk mencapai penatalan lancar dan saya mempunyai fail ScrollToTop.js yang saya gunakan dalam App.js saya. Ia berfungsi dengan baik apabila halaman tidak menatal, tetapi apabila saya mengklik butang yang membawa saya ke halaman lain dan "menatal lancar" sedang berlaku, scrollToTop tidak berfungsi, adakah sesiapa tahu cara untuk membetulkannya?

ScrollToTop.js

import { useEffect } daripada "react";
import { useLocation } daripada "react-router-dom";
import { gsap } daripada "gsap";
import { warna } daripada "./constant";

eksport fungsi lalai ScrollToTop() {
   const { nama laluan } = useLocation();
   const body = document.querySelector("body");

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

  kembali null;
}

Saya telah cuba menggunakan useLayoutEffect dalam setiap halaman tetapi ia tidak berfungsi

Answer 1

Seperti yang dinyatakan oleh orang lain, anda sedang membungkus komponen Laluan anda dengan komponen ScrollToTop, tetapi saya mengesyorkan menukarnya kepada cangkuk React daripada mengeditnya untuk menjadikan sifat anak tersiratnya, terutamanya memandangkan ia sebenarnya tidak Memaparkan sebarang kandungan yang anda mahu ia dijalankan sebagai kesan sampingan navigasi.