如何使用react路由器v6删除滚动位置

Question

我有一个react应用程序，我很难删除上一页的scroll-position。

如果你能在结束前理解我的问题，我将不胜感激。

我不想保存scroll history。我希望它总是回到页面的顶端。

当用户导航到新页面时，我使用下面的解决方案使应用程序回滚到页面的顶部。

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;

上面的代码工作非常好，没有任何问题。对我不起作用的是：

当用户单击使用Link从Link创建的react-router-dom时，它们将被导航到新页面(正确的页面)，但scroll-position属于上一页(来自该页面的页面)。

我试过用这些钩子。

• useLayoutEffect
• withRouter (从react路由器v6)
• useHistory中删除)(从react路由器v6
• useNavigate

中删除)

他们不工作了。

我怎么解决这个问题？还是我错过了什么？

我还试着实现以下解决方案。但不管用。

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

经过4个小时的研究，尝试和错误。我已经找到了解决这个问题的办法。

在react-router v6.你不需要去你的窗户。在您的useEffect上，您只需要有这样的代码：

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

我找到了答案here，并对它进行了更多的研究。