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

Question

我有一个反应应用程序，我正在努力删除上一页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;

上面的代码运行良好，没有任何问题。 对我不起作用的是：

当用户单击我使用来自react-router-dom Link创建的Button时，他们将导航到新页面（正确的页面），但scroll-position是前一页（它们来自的页面）。

我试过使用这些钩子。

• useLayoutEffect
• withRouter （从 react-router v6 中移除）
• useHistory （从 react-router 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); 
});

我在这里找到了答案，并对其进行了更多研究。