Add ScrollToTop component for resetting scroll position#62
Conversation
hoangsonww
added
bug
✅ Deploy Preview for docuthinker-ai-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a ScrollToTop component in frontend/src/App.js to reset the scroll position to the top of the page on route changes. The reviewer recommends refining this behavior by using the useNavigationType hook from react-router-dom to prevent scrolling to the top during back/forward navigations (where the action is POP), thereby preserving the browser's native scroll restoration and improving user experience.
| function ScrollToTop() { | ||
| const { pathname } = useLocation(); | ||
|
|
||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, [pathname]); | ||
|
|
||
| return null; | ||
| } |
There was a problem hiding this comment.
When users navigate back or forward (using the browser's back/forward buttons), they expect their scroll position to be restored. Currently, ScrollToTop will force the page to scroll to the top on every route change, including back/forward navigations (which trigger a POP action). This overrides the browser's native scroll restoration and degrades the user experience.
To fix this, you can use the useNavigationType hook from react-router-dom to only scroll to the top when the navigation action is PUSH or REPLACE (i.e., not POP).
Note: Make sure to import useNavigationType from react-router-dom at the top of the file.
function ScrollToTop() {
const { pathname } = useLocation();
const navigationType = useNavigationType();
useEffect(() => {
if (navigationType !== "POP") {
window.scrollTo(0, 0);
}
}, [pathname, navigationType]);
return null;
}
No description provided.