reactjs - 在转换之间保存和恢复状态的最佳方式

Question

我正在尝试使用向后和向前功能实现分页，但问题是如何保持转换之间的状态并恢复导航？

我试图通过以下方式使用 react-router 来实现这一点：

搜索结果组件

handleNextPage(){
        this.props.push({
            pathname: '/search_result',
            query:{
                key:key,
                location:location,
                page: eventKey
            },
            state:{
                content:this.props.searchResult.content,
                number: eventKey
            }
        });
    }

然后在减速器中：

import {LOCATION_CHANGE} from 'react-router-redux';
export default function (state = INIT_STATE, action) {
switch (action.type) {
    case LOCATION_CHANGE:
        let {pathname} = action.payload;
        if (pathname === PATHNAME && (action.payload.state !== null)) { 
                return {...state, content: action.payload.state.content, number: action.payload.state.number}
        }
}

return state;

}

问题是，当 SearchResult 组件启动时，来自服务器的数据尚不可用，因此空数组存储为当前位置的状态。

提前感谢您提供任何解决方法的想法。

Answer 1

我建议您仔细阅读redux git 存储库中的示例。当您到达最后一个包含分页的“真实世界”示例时，您将能够自己回答这个问题。