Scroll to top on every transition react-router-dom v6

Question

I'm trying to scroll on top of each page change with react-router dom v6. The code is scrolling back on top only on my home page and not on my character details page. I've tried many solutions but can't get them to work. I'm using "react-router-dom": "^6.2.2",

This is what I have achieved so far:

ScrollToTop.js:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop({ children }) {
    const { pathname } = useLocation();
    
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);
    
    return children;
}

My app.js

  <Router>
    <ScrollToTop>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/character/:char_id" element={<CharacterDetail />} />
        <Route path='*' element={<PageNotFound />} />
      </Routes>
      <Footer />
    </ScrollToTop>
  </Router>

I also tried doing my component directly using 'window.scrollTo(0, 0);' and by scrolling to an ID in my useEffect without success. Grateful for your guidance.

Answer 1

It seems it can also depend on the browser, some browsers are starting to handle "scroll restoration" by them self's (specs).

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop({ children }) {
  const { pathname } = useLocation();
  
  useEffect(() => {
    const canControlScrollRestoration = 'scrollRestoration' in window.history
    if (canControlScrollRestoration) {
      window.history.scrollRestoration = 'manual';
    }

    window.scrollTo(0, 0);
  }, [pathname]);
  
  return children;
}

Bonus note: I would not pass children to this component but rather render it as a sibling to App, this way it wouldn't trigger a re-render when location changes, unless necessary:

<Router>
  <ScrollToTop />
  <App />
</Router>

Answer 2

One thing to try is to include the window.scrollTo function inside a setTimeout function with a delay of 0 milliseconds, like this:

useEffect(() => {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 0);
}, [pathname]);

This will allow the browser to finish rendering the new page before scrolling to the top.

Another option is to try using the useEffect hook with an empty array as the second argument, which will only run the effect once when the component is mounted, like this:

useEffect(() => {
  window.scrollTo(0, 0);
}, []);

This will ensure that the page is always scrolled to the top when the component is first rendered, regardless of the route.

Answer 3

I found another simple solution! I found that, When you change the route, the screen display always stay the same in react router, so it remember the position of screen, if you log the window (console.log(window)), you will see that window position is always 0,0. => Scroll to top solution is not working.

My solution is set a loading:true state. When component did mount, setState loading: true.

when loading : true => render a blank component

when loading: false => render your main component.

Your main component will mount from the top so it will prevent the remember position of react router.

   const YourComponent = (props) =>{

   const [loading, setLoading] = useState(true);

   useEffect(()=>{
      setLoading(false)
   },[])

   if(loading){
      return(<BlankComponent/>)
   }else{
      return (<YourMainComponentDeatail/>)
   }

}

Answer 4

Use This Inside Your useEffect React Router V6 Above Only

 document.documentElement.scrollTo({
  top: 0,
  left: 0,
  behavior: "instant", // Optional if you want to skip the scrolling animation
});