如何使用瀏覽器后退按鈕跳轉到Redux狀態

Question

我是一個反應初學者，我有一個項目使用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>
    );
}

Answer 1

所以我自己想出來了。 基本上你需要做的是在創建時設置狀態信息，如下所示：

<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，因為沒有必要。 它在當前路線的狀態下進入，但在我的情況下沒有用。 希望這可以幫助將來的某個人。