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