So scrollen Sie beim Bildschirmwechsel in React JS und Lenis Smooth Scrolling zurück nach oben

Question

Ich verwende Lenis, um einen reibungslosen Bildlauf zu erreichen, und ich habe eine ScrollToTop.js-Datei, die ich in meiner App.js verwende. Es funktioniert gut, wenn die Seite nicht scrollt, aber wenn ich auf eine Schaltfläche klicke, die mich zu einer anderen Seite führt und das „sanfte Scrollen“ stattfindet, funktioniert scrollToTop nicht. Weiß jemand, wie man das beheben kann?

ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from „react-router-dom“;
import {gsap} aus „gsap“;
import { farben } aus "./constants";

Exportieren Sie die Standardfunktion ScrollToTop() {
   const { Pfadname } = useLocation();
   const body = document.querySelector("body");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { Dauer: 0, Hintergrundfarbe: Farben.weiß });
   }, [Pfadname]);

  null zurückgeben;
}

Ich habe versucht, useLayoutEffect auf jeder Seite zu verwenden, aber es funktioniert nicht

Answer 1

正如其他人指出的那样，您正在使用ScrollToTop组件包装您的Routes组件，但是我建议将其转换为React钩子，而不是编辑它以呈现其隐式children属性，特别是考虑到它实际上并不呈现任何内容，您希望它作为导航的副作用运行。