如何使用 react-router v6 删除滚动位置

Question

I have a react application and I am struggling to remove the previous page scroll-position .

Please I would appreciate it if you understand my problem before concluding.

I do not want to preserve the scroll history . I want it to always go back to the top of the page.

I have used the solution below to make the application scroll back to the top of the page whenever a user navigates to a new page.

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

const ScrollToTop = ({ children }) => {
  const { pathname } = useLocation();

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

  return children || null;
};

export default ScrollToTop;

The above code is working very fine with no issues. What is not working for me is:

When a user clicks a Button I created using Link from react-router-dom they are navigated to the new page (correct page), but the scroll-position is of the previous page (the page they are coming from).

I have tried using these hooks.

• useLayoutEffect
• withRouter (is removed from react-router v6)
• useHistory (is removed from react-router v6
• useNavigate

They are not working.

How can I resolve this? Or is there something I am missing?

I have also tried implementing the solution below. But wont work.

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

    function ScrollToTop({ history }) {
      useEffect(() => {
        const unlisten = history.listen(() => {
          window.scrollTo(0, 0);
        });
        return () => {
          unlisten();
        }
      }, []);
    
      return (null);
    }
    
    export default withRouter(ScrollToTop);

Answer 1

每次用户进入该屏幕时，您都可以滚动到顶部，使用焦点挂钩https://reactnavigation.org/docs/function-after-focusing-screen/ 。

Answer 2

After 4 hours of research and trying and errors. I have found the solution to this.

In react-router v6. You do not need to your window. on your useEffect You just need to have your code like this:

useEffect(() => {
    document.body.scrollTo(0, 0); 
});

I found the answer here , and researched more on it.