1

与我问的这个问题有点相关，当通过redux-simple-router和react router与历史 API 交互时，我在移动 chrome 中发现了一个相当令人沮丧的错误/实现细节。

我的场景很简单；我的应用程序有几个 url（使用浏览器历史记录对象制作得很漂亮）。例如，假设它们是/ /product, 和/contact。仅在/路线和/路线上，我有一个注册表单和一个标题组件（我也在使用 React），一个直接链接到该注册栏的注册按钮。

我如何实现这一点是在我的顶级应用程序组件中：

  browserHistory.listen(location => {
  if (typeof location.state === 'undefined' || location.state === null) {
    window.scrollTo(0, 0);
  }
});

在每次页面更改时，都会滚动到页面顶部。但是，如果页面发生更改并且位置状态为非空，例如signup，则滚动不会发生任何事情。然后在处理我的/路由渲染的页面中，我检查状态以查看它是否等于signup，如果是，我滚动到注册表单组件。

导航是使用来自的动作创建者实现的redux-simple-router：

dispatch(routeActions.push({ pathname: '/', state: 'signup' }));

在每个移动浏览器上，该操作都非常有效。但是，在移动 chrome 上，每个路由操作，无论我是使用操作创建器还是Link来自 react 路由器的组件触发它，都会在导航时触发页面刷新，并且应用程序会丢失状态。因此，如果我点击注册按钮，则会触发页面更改，然后状态会丢失，因此当页面检查时this.props.location.state，它已被重置为 null。

现在我已经对此进行了广泛的测试，我在桌面 Chrome、Firefox 或 Safari 上没有问题，在 iOS 上的 Firefox、Opera 和 Safari 上也是如此。每个routeActions.push动作都会触发页面更改并保持状态。

有谁知道这里发生了什么？几个小时以来，我一直把头撞在墙上，试图弄清楚为什么它不能只在 iOS 上的 Chrome 上工作。它只是 Chrome 历史 API 的一个实现细节吗？如果是这样，为什么它不会影响桌面上的 Chrome 浏览器？

4

0 回答 0