请教下大家,React怎么保存分页状态
发布于 8 年前 作者 scheshan 8098 次浏览 来自 问答

一个常见的场景:用户浏览到新闻列表的第10页,点击查看新闻详情,然后点浏览器的返回键,能够继续从第10页浏览 我一直觉得把pageIndex放到url hash是最好的选择,用浏览器的history api就可以很简单的完成这个功能了。我用了react-router,写了个PagerComponent,在currentPage修改时改变url hash

	hashHistory.push({
		pathname: "/" + page
    });

每次hash的改变不会重新初始化这个Component,只会触发Component的render()事件,render()里面又不能去设置state,不然无限递归了。我大概看了下react-router的文档,也没有发现什么方式可以监听hash的修改 有没有什么好的思路能够解决呢

7 回复

仔细看了react-router的生命周期,发现路由的修改会触发每个component的componentDidUpdate事件。。在componentDidMount中做初始化查询,在componentDidUpdate中做每次分页的查询,终于解决了

通常就是把分页号放进url参数化。

把数据存储起来就好了

楼主可以参考下我的,https://github.com/1340641314/react-kelink 登录注册这一块还没完成。不过列表也点击进入详情,返回之后,可以回到之前的位置

@1340641314 大概看了下,你是存到store里了??我是做web,用store局限性太大了:比如用户会随时点F5刷新,或者很可能需要把某一页URL分享出去等等。。 用url参数简单一些,浏览器自动把过去的状态都保存了

@scheshan 可以试试把数据存在session里面,这样就能避免刷新的问题,分页地址改变的时候,更改一下地址就好了

感觉还是放在url参数里面比较好,便于分享

回到顶部