Tengo un problema al navegar a otra página, su posición permanecerá como la página anterior. Por lo tanto, no se desplazará hacia arriba automáticamente. Actualmente estoy usando "react-router-dom": "^6.2.1",
ScrollToTop.js
import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; const withRouter = (Component) => { const Wrapper = (props) => { let history = useNavigate(); return ( <Component history={history} {...props} /> ); }; return Wrapper; }; function ScrollToTop() { let history = useNavigate(); useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, [history]); return (null); } export default withRouter(ScrollToTop);App.js Estoy devolviendo el siguiente fragmento
return ( <> <Router> <Header/> <ScrollToTop /> {isAuthenticated && <UserOptions user={user}/>} <Routes> <Route exact path="/" element={<Home /> }/> <Route exact path="/product/:id" element={<ProductDetails/>}/> <Route exact path="/products" element={<Products/>}/> <Route path="/products/:keyword" element={<Products/>}/> <Route exact path="/search" element={<Search/>}/> <Route exact path="/login" element={<LoginSignUp/>}/> </Routes> <Footer/> </Router> </> ); } export default App;Después de agregar el componente ScrollToTop, no obtengo nada en la página. y muestra un error en la consola que dice "TypeError no detectado: history.listen no es una función".
Soy un principiante en el desarrollo de la pila MERN, así que por favor guíenme donde me equivoco y qué debo cambiar en mi base de código.
He tomado referencia de los enlaces de fuelle