在 location.pathname 更改时滚动恢复？

Question

只有在 location.pathname 改变时页面才应该滚动到顶部，React.memo 只有在 pathname 改变而不是查询参数时才应该返回 true。但是即使应该更新返回false，页面也会滚动到顶部。

const shouldUpdate = (prevProps, nextProps) => {
  return prevProps.location.pathname !== nextProps.location.pathname;
};

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

export default withRouter(React.memo(ScrollToTop, shouldUpdate));

<React.Fragment>
    <Router>
      <ScrollToTop />
      <Switch>
        .
        .
        .
      </Switch>
    </Router>
  </React.Fragment>

Answer 1

你应该使用useEffect钩子调用scrollTo方法

  useEffect(() => {
    document.querySelector("#root").scrollTo(0, 0);
  }, []);