ReactJS-切换标签页会导致在标签页更改之前不需要的滚动到右上角

Question

我正在建立一个页面，页面顶部固定一个标题。目前，我可以导航到两个页面：主页和关于。

该网页的简单绘图：

两个页面都可能变得很高，因此我正在尝试为它们存储滚动位置，以便当用户从一个页面切换到另一个页面时，他可以回到上一次的位置。问题是，当我从“关于”切换到“首页”（或反过来）时，当前页面（在切换之前的瞬间）滚动到顶部，然后才显示新页面。滚动速度非常快，结果导致产生怪异的闪烁效果（但似乎无法将页面完全滚动到顶部）

该问题发生在 Safari 中（我没有发现它在Chrome中发生，并且我还没有在Opera或IE / Firefox中对其进行测试）。

我的操作方式：

在NavigationList（固定的标题）中，我存储了当前页面的滚动位置，然后才切换到新页面。因此，当我单击首页或关于时，此代码将被调用：

history.push(clickedItem.pushDirectory);
localStorage.setItem(item.title, window.scrollY);

，然后在主页和关于组件中，我通过以下方式恢复滚动位置：

  componentDidMount() {
    const scrollPosition = localStorage.getItem("ABOUT") || 0; //or "HOME" depending on the component
    window.scrollTo(0, scrollPosition);
  }

这是我处理路由切换的代码。我目前添加了淡入淡出动画，但即使没有此动画，也会出现错误。

  <Route
    render={({ location }) => (
      <div className="contentContainer">
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames="fadeAnimation"
            timeout={{ enter: 300, exit: 300 }}
          >
            <Switch location={location}>
              <Route exact path="/" component={HomePage} />
              <Route exact path="/about" component={AboutPage} />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
    )}
  />

有人可以告诉我如何在页面更改之前立即禁用此滚动，或者告诉我一种更好的方法来保留组件的滚动位置。