reactjs – React路由器,浏览器后退按钮后如何恢复状态？

发布时间：2020-12-15 05:05:26 所属栏目：百科来源：网络整理

导读：我试图找出当用户使用后退/前进浏览器按钮导航时如何使我的React SPA应用程序保持状态.例如.用户填写表格,然后他前后移动,表格自动恢复. 我回顾了很多JavaScript路由器,但似乎没有一个正确解决这个问题……(甚至根本没有). 目前我正在使用React Router 4,这

我试图找出当用户使用后退/前进浏览器按钮导航时如何使我的React SPA应用程序保持状态.例如.用户填写表格,然后他前后移动,表格自动恢复.

我回顾了很多JavaScript路由器,但似乎没有一个正确解决这个问题……(甚至根本没有).

目前我正在使用React Router 4,这是我采用的模式：

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

我的问题是：上述模式是否正确？建议？有没有更好的和广泛采用的方式？

过了一会儿,我发现了一个合理的解决方法：

> in react,在每个this.setState()之后,我使用window.history.replaceState({key：history.location.key,state：this.state})保持状态与历史同步
>当安装或刷新“page”组件时(willMount和willReceiveProps)我在props.params.location.state中检查状态：如果有,我会恢复它;如果没有,我会创造一个全新的状态.
>在同一页面上导航时,我不使用路由,我只使用this.setState和window.history.pushState
>当在页面外导航时,我只是使用路线并避免在州内传递任何东西

这个解决方案似乎很好用,唯一的小缺点是：

> state必须是可序列化的
> this.setState是一个陷阱因为它是异步的,你不能在它之后使用this.state,除非你做了欺骗.
>初始空状态必须由在恢复或初始化阶段使用的函数提供,它不能只停留在Component的构造函数()中
>在Firefox中,后退按钮随机工作后自动滚动恢复,不知道为什么,但Chrome和Edge都可以.

总的来说,我编写了一个PageComponent,它扩展了Component,可以执行所有初始化/恢复工作;它还会覆盖this.setState以使其与历史记录自动同步并避免异步烦恼.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!