react-router 中保持页面状态
2017-06-13 00:00
302 查看
摘要: 例如从列表页进入详情页,点击返回列表页时,如何保持之前列表页的状态。
最近工作中用 react + react-router 实现了一个类似今日头条的 demo。然后今天一个同事过来告诉我,能不能点击列表页进入详情页后,然后点击返回能够保持住之前列表页的状态。现在是返回后列表页又会重新加载。如果之前加载了很多页数据的话,现在又得重新加载了。易用性很差。下面附上我的解决方案,如果各位有更好的,欢迎提出来。
我想的第一个解决方案是把新闻详情页通过 css 隐藏在列表页,然后点击列表中的一项时,加载数据,然后显示出来详情页,然后点击返回时,再把详情页隐藏。这个思路肯定是可行的。但是我需要改动不少的 code。我就放弃了(实际上我尝试了一下,改的最终效果不好)。
然后我又想到另一个方法,就是通过 html5 的 sessionStorage 来维持列表页的状态,附一下核心部分的代码。
在列表页这个 component 即将被 unmount 时,通过 window.sessionStorage.setItem 将当前列表页的数据存储起来。
然后写一个 restore data 的方法,在 class 的构造函数中执行一下这个方法判断一下,如果拿到了之前存储的 sessionStorage,那么就给 state 一个初始赋值。
总结:总的思路就是打开列表组件的时候,先去执行一个 restore 方法,判断 sessionStorage 中有没有数据,有的话就带上,没有的话就该干嘛干嘛。然后列表组件被卸载的时候,存储当前的列表数据到 sessionStroage 中,便于以后使用。
最近工作中用 react + react-router 实现了一个类似今日头条的 demo。然后今天一个同事过来告诉我,能不能点击列表页进入详情页后,然后点击返回能够保持住之前列表页的状态。现在是返回后列表页又会重新加载。如果之前加载了很多页数据的话,现在又得重新加载了。易用性很差。下面附上我的解决方案,如果各位有更好的,欢迎提出来。
我想的第一个解决方案是把新闻详情页通过 css 隐藏在列表页,然后点击列表中的一项时,加载数据,然后显示出来详情页,然后点击返回时,再把详情页隐藏。这个思路肯定是可行的。但是我需要改动不少的 code。我就放弃了(实际上我尝试了一下,改的最终效果不好)。
然后我又想到另一个方法,就是通过 html5 的 sessionStorage 来维持列表页的状态,附一下核心部分的代码。
componentWillUnmount() { console.log('待保存的数据:', this.state.newslist); console.log('保存滚动条位置:', document.body.scrollTop); let data = { newslist: this.state.newslist, scrollpx: document.body.scrollTop, page: this.state.page } window.sessionStorage.setItem('tmpdata', JSON.stringify(data)); }
在列表页这个 component 即将被 unmount 时,通过 window.sessionStorage.setItem 将当前列表页的数据存储起来。
try_restore_component() { let data = window.sessionStorage.getItem("tmpdata"); if (data) { data = JSON.parse(data); this.state = { newslist: data.newslist, page: data.page, scrollpx: data.scrollpx } } }
然后写一个 restore data 的方法,在 class 的构造函数中执行一下这个方法判断一下,如果拿到了之前存储的 sessionStorage,那么就给 state 一个初始赋值。
总结:总的思路就是打开列表组件的时候,先去执行一个 restore 方法,判断 sessionStorage 中有没有数据,有的话就带上,没有的话就该干嘛干嘛。然后列表组件被卸载的时候,存储当前的列表数据到 sessionStroage 中,便于以后使用。
相关文章推荐
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- chrome toggle element states 保持页面hover状态
- ListItem 的 Attributes 在页面回发(PostBack)之间并不会保持视图状态?
- 使用HtmlInputHidden 控件在本页面保持状态和跨页面传值
- ASP.net中保持页面中滚动条状态的代码
- React Router页面传值的三种方法
- Ajax页面状态如何保持?
- react-router 与react-reduct 配合使用时,页面不刷新问题
- React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误
- c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持
- react-router-dom示例讲解(六)——未匹配(404页面)
- react-router打包后打开路由页面空白
- ReactNative React-native-router-flux框架---刷新当前页面的属性
- 使用 HtmlInputHidden 控件在JavaScript 与C#传值 本页面保持状态和跨页面传值
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- 《ReactNative实战讲义》React-native-router-flux框架篇---页面跳转与传值
- 几种保持页面状态信息的讨论(转)
- 使用 HtmlInputHidden 控件在本页面保持状态和跨页面传值
- react-router与react-reduct配合使用时页面不刷新问题解决方法
- react-router 页面离开 提示数据变更