react-router4和redux配合使用,如何同步history和store?
问题描述
例如我有一个list页面,当前地址为 something/list?page=1, 当我点击下一页的时候地址变为 something/list?page=2. 我希望此时点击浏览器的回退按钮,能够回到something/list?page=1并且正确显示page=1时的内容。
但是回退之后地址虽然变换了,页面并没有显示page=1的内容,依然呈现page=2.
问题出现的环境背景及自己尝试过哪些方法
我的做法是在componentWillReceiveProps里面判断url是不是需要改变,需要改变就把当前的state保存下来,在回退的时候把state替换为之前保存的state,但是这样做只对当前组件有效,需要对每个有相同需求的组件都做这样的处理,请问有没有更好的办法,这种常见的需求行业没最佳实践?是我搜索了很久也没有找到比较好的解决办法。抱歉我才接触react 和 redux,对这方面的实践还不熟悉
相关代码
componentWillReceiveProps = (props) =>{
if( props.state.shoudlUrlChange ){
const query = objFilter(this.state.query, v =>{
return v && v !== '' && v !== '-1'
})
this.props.history.push('/admin/inwalks?' + qs.stringify(query), props.state)
// 什么事情都要去写一个action我正的觉得很烦,这里就直接改
props.state.shoudlUrlChange = false
}
if( props.location !== this.props.location && props.location.state ){
this.state = props.location.state
}else{
this.state = props.state
}
this.props = props
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论