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

user_13276517 0
Viewed 1082

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.

react-router-dom react-router reactjs javascript
2 Answers

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>
user_29020630

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/>)
   }

}

user_196981080
Related