如何在路线更改后滚动到页面顶部，但返回时保留滚动位置？

Question

我想在更改路线后滚动到页面顶部。但是，当用户在浏览器中按下“返回”按钮时，我希望他们返回到上一页的上一个滚动位置，而不是返回到顶部。我已经实现了 n“滚动到顶部”功能并且它有效 (Link)。但是，我想知道在“返回”时如何修改它以记住以前的滚动位置。

滚动到顶部：

import React, { useEffect, Fragment } from "react";
import { withRouter } from "react-router-dom";

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

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

App.js

<ScrollToTop>
   <Switch>
       <PublicRoute exact path="/join/" component={LandingPage} />
   </Switch>
</ScrollToTop>

Answer 1

实现此目的的一种方法是通过位置键和窗口 x、y 坐标跟踪用户的位置。 react-router-dom 给出了一个好主意 here。

这是一个可能看起来像的示例。

export default function ScrollRestoration() {
  const { key } = useLocation();
  const positions = useRef(new Map());

  useEffect(() => {
    if (positions.current.has(key)) {
      const { x, y } = positions.current.get(key);
      window.scrollTo(x, y);
    } else {
      window.scrollTo(0, 0);
    }

    const handler = () => {
      positions.current.set(key, { x: window.scrollX, y: window.scrollY });
    };

    window.addEventListener("scroll", handler);
    return () => {
      window.removeEventListener("scroll", handler);
    };
  }, [key]);

  return null;
}

演示：https://codesandbox.io/s/relaxed-aryabhata-u1hgf