Comment revenir en haut lors du changement d'écran dans React JS et le défilement fluide de Lenis

Question

J'utilise lenis pour obtenir un défilement fluide et j'ai un fichier ScrollToTop.js que j'utilise dans mon App.js. Cela fonctionne bien lorsque la page ne défile pas, mais lorsque je clique sur un bouton qui m'amène à une autre page et que le « défilement fluide » se produit, scrollToTop ne fonctionne pas, est-ce que quelqu'un sait comment résoudre ce problème ?

ScrollToTop.js

import { useEffect } depuis "react" ;
importer { useLocation } depuis "react-router-dom" ;
importer {gsap} depuis "gsap" ;
importer { couleurs } depuis "./constantes" ;

exporter la fonction par défaut ScrollToTop() {
   const { chemin d'accès } = useLocation();
   const body = document.querySelector("corps");

   useEffect(() => {
     window.scrollTo(0, 0);
     // gsap.to(body, { durée : 0, backgroundColor : couleurs.blanc });
   }, [chemin d'accès]);

  renvoie null ;
}
J'ai essayé d'utiliser useLayoutEffect sur chaque page mais cela ne fonctionne pas
            

Answer 1

Comme d'autres l'ont souligné, vous enveloppez votre composant Routes avec un composant ScrollToTop, mais je recommande de le convertir en un hook React plutôt que de le modifier pour restituer sa propriété enfants implicite, d'autant plus qu'il ne restitue aucun contenu que vous avez. je veux qu'il s'exécute comme un effet secondaire de la navigation.