在 React.js 中从另一个页面导航回来时如何保留第一页上的滚动位置？

Question

假设我有两页/两条路线。在其中一个我有一个

<Link>

组件：

<Link to="/something">
    <Button>
        This is Link
    </Button>
</Link>

第二个，我可以回到之前的路线：

const handleGoBack = () => {
    navigate(-1);
};

return (

    <Button onClick={handleGoBack}>
        Back
    </Button>
);

将第一页的位置保存到我单击该

<Link>

组件的位置的最佳方法是什么，以便当我从另一个页面导航回来时，我应该返回到我单击链接的确切位置？

我尝试将其添加到第一个组件中：

function storeScrollPosition() {
    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
}

然后我在

<Link>

中将其用作

onClick

操作：

<Link to="/something" onClick={storeScrollPosition}>
    <Button>
        This is Link
    </Button>
</Link>

，在第二个组件中执行

useEffect

中的所有逻辑时：

useEffect(() => {
    const scrollPosition = sessionStorage.getItem('scrollPosition');
    if (scrollPosition) {
        window.scrollTo(0, parseInt(scrollPosition));
        sessionStorage.removeItem('scrollPosition');
    } else {
        window.scrollTo(0, 0);
    }
}, []);

但似乎效果并不完美。有时有效，有时无效。我不知道，但我认为这与页面渲染有关。有没有更好的方法来做到这一点？

*我使用react-router-dom进行导航。

Answer 1

您可以使用反应路由器组件保留滚动位置，即

<ScrollRestoration />

。

只需将以下代码添加到您的根路由 -

import { ScrollRestoration } from 'react-router-dom';

export const function RootRoute() {
 return (
  <>
   {/* your code */}
   <ScrollRestoration />
  </>
 );
}

参考：doc