react-router4和redux配合使用,如何同步history和store?

发布于 2022-09-07 20:20:59 字数 1079 浏览 13 评论 0

问题描述

例如我有一个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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文