0

Tengo un problema al querer que las pantallas se coloquen al inicio cuando navego en ellas, quisiera que estén al inicio cada vez que cambio de pagina.

Mi codigo

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop({ children }) {
  const { pathname } = useLocation();

  useEffect(() => {
    // console.log(pathname);
    window.scrollTo(0, 0);
  }, [pathname]);

  return children;
}

este es el metodo que utilizo para realizar como lo muestra esta documentacion https://v5.reactrouter.com/web/guides/scroll-restoration

Creo que el problema esta en el children que lo paso para que se muestre la pantalla.

MI app router esta de la siguiente manera

<>
      <AppContext.Provider value={initialState}>
      
        <BrowserRouter>
      <ScrollToTop>
        <Layout>
          
        
          <Switch>
          
            <Route  exact path="/" component={Home}></Route>
        
            <Route exact path="/shop/:name/:banner" component={Shop}></Route>
            <Route exact path="/shop" component={Shop}></Route>

     
            <Route component={NotFound}></Route>

          </Switch>
          
         
      </Layout>
 <ScrollToTop/>

       
          
        </BrowserRouter>

      </AppContext.Provider>
      
    </>

tambien tengo mi componente de layout donde uno todo

const Layout = ({ children }) => {
  return (
    <div className="Main">
      <Header />
    
     {children}

      

      <Footer />
    </div>
  );
};

Porfa si alguien me puede ayudar ,

3
  • No entiendo, dónde está el ScrollToTop en tus componentes? Cómo lo usas?
    – FranAcuna
    Commented el 4 feb. 2022 a las 16:58
  • @FranAcuna lo utilizo dentro de BrowserRouter ne las rutas Commented el 8 feb. 2022 a las 21:26
  • Creo que lo agregaste mal, el cierre del ScrollToTop tiene que incluir el cierre de Layout.
    – FranAcuna
    Commented el 9 feb. 2022 a las 0:11

1 respuesta 1

0

Encontré una solución diferente al scrollTop que en mi caso no me funciono lo que hice fue en mi layout colocar este codigo:

const Layout = ({ children }) => {
  const scrollSpan= useRef();

  const handleScroll = useCallback(() => {
    console.log("scrolling");
  }, []);

  useEffect(() => {

    const div = scrollSpan.current;
    div.addEventListener('scroll', handleScroll);
  }, [handleScroll]);


  return (
    <div   ref={scrollSpan} className="Main scrollableContainer" >
       <Header />

        
            {children}

      <Footer />

       
     
    </div>
  );
};

export default Layout;

Hay que tomar mucho en cuenta la parte ref y agregar classname scrollableContainer que es necesario para que funcione aqui el css

.scrollableContainer {
  overflow-y: auto;
  overflow-x: hidden;height: auto;
}

Con esto todas las paginas a las que me redirijo se colocan en la parte inicial , si deseas este mismo codigo se puede aplicar si necesitas que se redija a otra parte la pagina.Me imagino que no me funciono el scroolTop por la estructura que tenia de mis rutas y como esta formado la pagina . Espero que le sirva a alguien.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.