反应路由器，浏览器后退按钮后如何恢复状态？ [英] React router, how to restore state after browser back button?

问题描述

我正在尝试弄清楚如何使我的Reaction SPA应用程序在用户使用后退/前进浏览器按钮导航时保持状态。例如，用户正在填写表单，然后他来回移动，该表单将自动恢复。

我检查了周围的许多JavaScript路由器，但似乎没有一个能正确地解决这个问题……(甚至根本没有)。

我目前使用的是Reaction Rout4，以下是我采用的模式：

1. 以编程方式离开页面时，我首先使用history.replace(this.state)保存当前页面的状态；然后使用history.push(newLocation)
移出页面
2. 创建页面组件(componentWillMount)时，我检查this.props.location.state !== undefined，如果是，则使用this.setState(this.props.location.state)
恢复它

我的问题是：上面的模式正确吗？建议？有没有更好、更广泛采用的方法？

推荐答案

一段时间后，我发现了一个合理的解决办法：

• 在Reaction中，每隔this.setState()我使用window.history.replaceState({ key: history.location.key, state: this.state})使状态与历史同步
• 挂载或刷新"页面"组件(willMount和willReceiveProps)时，我检查props.params.location.state中的状态：如果有，我会恢复它；如果没有，我会创建一个新的状态。
• 在同一页面导航时，我不使用路线，只使用this.setState和window.history.pushState
• 在页面外导航时，我只使用路径，避免传递状态中的任何内容

这个解决方案似乎效果很好，唯一的小缺点是：

• 状态必须是可序列化的
• this.setState是一个陷阱，因为它是异步的，您不能在它之后使用this.state，除非您使用诡计。
• 初始空状态必须由在还原或初始化阶段使用的函数提供，它不能仅停留在Component
的constructor()中
• 在Firefox中，后退按钮后的自动滚动恢复是随机工作的，不知道为什么，但Chrome和Edge都可以。

总的来说，我编写了一个PageComponent，它扩展了Component，它完成了所有的初始化/恢复工作；它还覆盖了this.setState，使其自动与历史同步，避免了异步干扰。

这篇关于反应路由器，浏览器后退按钮后如何恢复状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！