前後の機能を備えたページネーションを実装しようとしていますが、問題は遷移間の状態を維持し、ナビゲーションで復元する方法ですか?
次の方法で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 コンポーネントが開始されたときに、サーバーからのデータがまだ利用できないため、空の配列が現在の場所の状態として保存されることです。
それを解決する方法についてのアイデアを事前にありがとう。