¿Cómo desplazarse hacia arriba en el cambio de ruta con el enrutador de reacción dom v6?
He intentado esto, el desplazamiento del enrutador de reacción hacia arriba en cada transición , que fue mi solución para hacer que mi página se desplace hacia arriba en el cambio de ruta cuando uso react-router-dom v5. Ahora, estoy usando react-router-dom v6 y esta solución no funciona.
Probé React-router v6 window.scrollTo no funciona y no funciona para mí.
Probé https://github.com/remix-run/react-router/issues/7365 , que es usar el accesorio de preload para activar scrollTo(0,0) , tampoco funciona para mí.
Bueno, no estoy muy seguro de cómo se ve tu diseño, pero dentro de tu <BrowserRouter /> puedes envolver tu aplicación en un envoltorio y verificar el cambio de ubicación en un useLayoutEffect . Luego, si hay un cambio, puede desplazarse hasta la parte superior. Aquí hay un ejemplo crudo.
import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom' import { useLayoutEffect } from 'react' const Wrapper = ({children}) => { const location = useLocation(); useLayoutEffect(() => { document.documentElement.scrollTo(0, 0); }, [location.pathname]); return children } const Component = ({title}) => { return ( <div> <p style={{paddingTop: '150vh'}}>{title}</p> </div> ) } const App = () => { return ( <BrowserRouter> <Wrapper> <p>Scroll the bottom to change pages</p> <Routes> <Route path="/" element={<Component title="Home"/>} /> <Route path="/about" element={<Component title="About"/>} /> <Route path="/product" element={<Component title="Product"/>} /> </Routes> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/product">Product</Link> </Wrapper> </BrowserRouter> ) } export default Appconst scrollToPosition = (top = 0) => { try { /** * Latest API */ window.scroll({ top: top, left: 0, behavior: "smooth", }); } catch (_) { /** * Fallback */ window.scrollTo(0, top); } };Puede usar el código anterior para desplazarse hacia arriba.
const didMount = useDidMount(); const router = useRouter(); const { asPath } = router; useEffect(() => { if (didMount) { scrollToPosition(); } }, [asPath]);Y agregue el código anterior al componente principal superior.