问题描述
在react 应用中,react-router 组件只会保存一个页面(即进入新的路由后,旧路由的页面就会被销毁),与 app 或者 小程序的路由相差较大。现在问题是,在移动端,返回上一个页面是常见操作,怎么保证能还原上一个页面的状态?
个人了解的方法:
- 用状态管理把页面的状态都缓存起来
-
有一些第三方 router 组件做了特殊处理,它在进入下一个路由时,不会销毁旧路由,而是把页面组件用 css 隐藏起来,虽然简单粗暴,但这种方法有缺点:
- 旧页面和新页面会互相影响,例如旧页面在播放视频,那么进入新页面时就得手动关闭视频先。
- 滚动位置的保存。如果依赖于缓存页面的话,那么每个页面就得都用局部滚动来处理。但是局部滚动和body滚动相比,感觉还是有点不流畅。而且现在微信ios上,网页下面还多了个导航栏,如果用局部滚动,那么这个导航栏是消失不了的。
- 因为旧页面被缓存起来了,那么返回的时候会导致生命周期(componentDidMount, componentWillMount)不会触发。
SPA的话,用redux保存你想要的数据