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

Question

I'm a react beginner and I have a project using React Router (4.2.2), Redux and I've recently added react-router-redux hoping that it would solve my problem. I have components whose redux stored states need to change based on interactions with the browser back and forward buttons.

For example, I have a screen containing details for an element the user clicked. If I use the browser back button and navigate to another point in history in which that details view was open, it will only show the most recent element info (due to that the only information in the store) or sometimes no information at all will be passed.

I thought react-router-redux would help me keep these two in sync but maybe I'm missing a step that enables that to happen. I've installed Redux Debug Tools and I can see in there the state that I want to jump to, but how do I enable it when the user uses the back button? The url for the details page is the same each time it's viewed, perhaps I need to add a hash tag with specific information but even then, how would I do a look up for the correct information in the store?

I open the details view like this:

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

And inside 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

So I figured it out on my own. Essentially what you need to do is set the state information inside the when you create it, like so:

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

then in the class you need the information ActivityDetails in my case you can query it like this:

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

or if you're using withRouter and history it's also in the following location:

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

I ended up removing react-router-redux because it wasn't necessary. It made an entry in the state with the current route, but in my case that wasn't useful. Hope this helps someone in the future.