CNode

请教下大家,React怎么保存分页状态

问答
Sscheshan发布于10 年前最后回复10 年前7 回复8745 浏览0 收藏

一个常见的场景:用户浏览到新闻列表的第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)

F
flamingtop#1·10 年前

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

1
1340641314#2·10 年前

把数据存储起来就好了

1
1340641314#3·10 年前

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

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

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

1
1340641314#5·10 年前
S
scheshan#6·10 年前

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

2
2linziyi2#7·10 年前

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

参与回复
登录后即可参与回复。登录