重新加载页面时，Mobile Safari IOS将自动滚动底部页面

Question

我正在使用react，一旦我在safari中重新加载页面，它就会无故自动在页面底部滚动。使用Iphone只能仅出现此错误。

我正在努力寻找此错误的来源，但我不知道。

我发现的唯一解决方案是：

componentDidMount() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 800); 
}

除非我正在使用window.scrollTo(0, 0)，否则在componentDidMount（）中使用setTimeout无效，但是我不知道这是正确的方法。

当我点击应用程序中的链接时，由于使用了https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md方法，所以我没有问题

Answer 1

我终于找到了为什么我在Safari Mobile上有这种不良行为。

在我的应用中，我有一个AppContainer组件，它封装了我的所有路线

routes.js

 <AppContainer location={window.location}>
    <Switch>
        <Route path="/sign-in" component={SignInContainer} />
    </Switch>
</AppContainer>

其中，我导出默认的班级 export default withRouter((connect(mapStateToProps, mapDispatchToProps)(AppContainer)));

事实证明，在此组件中，componentDidMount()在我的路线中所有嵌套组件之前被调用。我通过在导出默认值中添加translate解决了第一个问题。

因为我使用的是react-i18next和选项react: { wait: true }， 所有嵌套的子组件都有export default translate(['common'))。

意味着每次安装孩子时，它将等待在渲染之前加载所有语言环境，AppContainer并非如此，这就是为什么首先调用他的componentDidMount的原因。

我只需要添加

export default withRouter( translate([])(connect(mapStateToProps, mapDispatchToProps)(AppContainer)), );

现在生命周期已经确定，我只需要在componentDidMount的{​​{1}}上添加scrollBy，这一次我就使用了

AppContainer

AppContainer

，而不是大约800毫秒的时间。

希望它将帮助遇到相同问题的人们。