Repository navigation
Scroll to top on route change #132
Description
Activity
@notangelmario The solution should probably similar to what they recommend in react-router: https://reactrouter.com/web/guides/scroll-restoration/scroll-to-top
import { useEffect } from "react"; import { useLocation } from "wouter"; export default function ScrollToTop() { const [ pathname ] = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }
Reacted by berjo and Santiago Fraire WillemoesThank you very much!
Just wanted to note that the solution above is outdated:
import { useEffect } from "react"; import { useLocation } from "wouter"; export default function ScrollToTop() { const [ pathname ] = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; }
Simply change the curly braces to square brackets and you are set!
Reacted by cashd and Santiago Fraire Willemoes- added a commit that references this issue
on Jun 10, 2023
How can we make the page scroll back to top on route change? Is there a function we can hook into the Link component? Some kind of option or something