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

Question

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

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

我认为 react-router-redux 会帮助我保持这两者同步，但也许我错过了一个实现同步的步骤。我已经安装了 Redux Debug Tools，我可以在那里看到我想要跳转到的状态，但是当用户使用后退按钮时我该如何启用它呢？详情页的 url 每次查看都是一样的，也许我需要添加一个带有特定信息的哈希标签，但即便如此，我如何在商店中查找正确的信息？

我这样打开详情视图：

<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>
    );
}

Answer 1

所以我自己想出来了。本质上，您需要做的是在创建状态信息时在内部设置状态信息，如下所示：

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

然后在 class 中你需要信息 ActivityDetails 在我的例子中你可以这样查询它：

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

或者，如果您正在使用 withRouter 和历史记录，它也在以下位置：

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

我最终删除了 react-router-redux，因为没有必要。它使用当前路线进入该州，但在我的情况下这没有用。希望这对以后的人有所帮助。

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

How to Jump to Redux State with Browser Back Button

reactjs

redux

react-router

react-router-redux