如何使用 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); 
});

我在這里找到了答案，並對其進行了更多研究。