Scroll to top on route change

[notangelmario]

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

[molefrog]

@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;
}

[notangelmario]

Thank you very much!

[xav-ie]

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!

[molefrog]

I've updated my comment, thanks for spotting the typo @xav-ie