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 ,
ScrollToTop
en tus componentes? Cómo lo usas?ScrollToTop
tiene que incluir el cierre deLayout
.