Javascript 单击后退按钮时，在react 16应用程序中恢复滚动位置

我有一个react 16应用程序，我正在使用useEffect尝试在整个应用程序中维护/恢复滚动位置，但我无法让它工作——当我尝试读取

滚动位置时，会得到
未定义的
。下面是函数：

import { useEffect, useState } from "react";

const maintainScroll = () => {
  console.log('scroll fire');
  const [scrollPosition, setScrollPosition] = useState();
  const handleScroll = () => {
    // when component rerenders, it causes window.scrollY to be 0.
    if (window.scrollY !== 0) {
      setScrollPosition(window.scrollY);
      console.log(scrollposition);
    }
  };

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

  // restore position
  useEffect(
    () => {
      window.scrollTo(0, scrollPosition);
    }
  );
};

export default maintainScroll;

然后我的App.js文件如下所示：

const App = ({children}) => {
  maintainScroll();
  return (
    <>
    <Helmet htmlAttributes={{ lang: 'en' }}>
      ...
    </Helmet>
    <div className="site-container">
            {children}
    </div>
    ...

const-App=（{children}）=>{
保持滚动（）；
返回(
...
{儿童}
...

maintainScroll（）
正在启动，但当我注销控制台时，
scrollPosition
我得到了
未定义的
——我想这就是问题所在，但我不确定为什么它未定义。当我单击“上一步”按钮时，它只会在页面顶部重新显示。我还尝试在各个页面上使用它，而不是在父App.js文件上使用它，但仍然没有运气。我很感激我喜欢它