javascript - ReactJS - 切换选项卡会导致在选项卡更改之前不需要滚动到右上角

Question

我正在构建一个顶部有固定标题的网页。目前我可以导航到两个页面：Home和About。

网页的简单绘制：

两个页面都可以变得非常高，因此我正在尝试为它们存储滚动位置，以便当用户从一个页面切换到另一个页面时，他可以正确地到达他最后一次的位置。问题是，当我从 About 切换到 Home（或其他方式）当前页面时，在切换之前的片刻，滚动到顶部，然后才显示新页面。滚动速度非常快，结果导致奇怪的闪烁效果（但似乎它没有将页面完全滚动到顶部）

问题出现在Safari中（我没有看到它发生在 Chrome 中，我还没有在 Opera 或 IE/Firefox 中测试过）。

我这样做的方式：

在NavigationList（这是固定标题）中，我在切换到新页面之前存储当前页面的滚动位置。因此，当我单击Home或About时，会调用此代码：

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

然后在Home和About组件中，我以这种方式恢复滚动位置：

  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>
    )}
  />

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

标签： javascriptreactjssafarireact-router-v4