如何使用浏览器后退按钮跳转到Redux状态

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用浏览器后退按钮跳转到Redux状态相关的知识,希望对你有一定的参考价值。

我是一个反应初学者,我有一个项目使用React Router(4.2.2),Redux和我最近添加了react-router-redux希望它能解决我的问题。我有基于与浏览器后退和前进按钮的交互,其redux存储状态需要更改的组件。

例如,我有一个屏幕,其中包含用户单击的元素的详细信息。如果我使用浏览器后退按钮并导航到历史记录中打开详细信息视图的另一个点,它将仅显示最新的元素信息(由于该商店中的唯一信息)或有时根本没有信息通过。

我认为react-router-redux会帮助我保持这两个同步,但也许我错过了一个让它发生的步骤。我已经安装了Redux调试工具,我可以在那里看到我想跳转到的状态,但是当用户使用后退按钮时如何启用它?每次查看详细信息页面的网址都是相同的,也许我需要添加一个包含特定信息的哈希标记,但即便如此,我如何在商店中查找正确的信息?

我打开这样的详细信息视图:

<Link to='/activityDetails'>
       <ActivityButton 
           id={this.props.someData.someId}
       />
</Link>

在ActivityButton里面:

openActivityDetails = () => {
    this.props.showActivityDetailsScreen(this.props.id);
};

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
        showActivityDetailsScreen: activityDetailsActions.showActivityDetails
    }, dispatch)
}

render(){
    return (
        <div className={'activity-button'} onClick={this.openActivityDetails}>
            <img
                onClick={this.handleClick}
                src={imgPath}
            />
        </div>
    );
}
答案

所以我自己想出来了。基本上你需要做的是在创建时设置状态信息,如下所示:

<Link to={{
    pathname: '/activityDetails',
    state: { "activityData": activityData }
}}>
    <ActivityButton 
        id={this.props.someData.someId}
    />
</Link>

然后在类中你需要信息ActivityDetails在我的情况下你可以像这样查询:

 var actData = this.props.location.state.activityData;

或者如果您使用的是路由器和历史记录,它也位于以下位置:

const { history: { push } } = this.props;
history.state.state.activityData

我最终删除了react-router-redux,因为没有必要。它在当前路线的状态下进入,但在我的情况下没有用。希望这可以帮助将来的某个人。

以上是关于如何使用浏览器后退按钮跳转到Redux状态的主要内容,如果未能解决你的问题,请参考以下文章

浏览器后退按钮跳转到最后一个位置(如 maps.google.com)

导航抽屉,处理后退按钮以转到以前的片段?

带有 Webview 的片段利用硬件后退按钮转到上一个网页

js如何使浏览器的后退和前进功能失效(IE FF 谷歌)

后退按钮关闭应用程序而不是转到上一个片段 android 导航组件

点击浏览器返回按钮能跳转到指定页面。求js代码