React Routerを使用してクエリパラメータに基づいた状態のルートを再ロード

Question

クエリパラメータに基づいてコンストラクタに状態を設定するルートがあります。 React Routerには、クエリパラメータに基づいてルーティングするオプションがないため、クエリパラメータが変更された場合でも、React Routerはそれを同じルートとして扱います。

たとえば、React Routerはhttp://example.com/とhttp://example.com/?page=2を同じルートとして扱います。 2ページ目から1ページ目にリダイレクトすると、コンストラクタは再び実行されません。しかし、私は状態をリセットするために再度実行するコンストラクタが必要です。

React Routerに経路を強制的に再ロードさせる方法はありますか？

これはうまくいく解決策ですが、非常にハッキリです。

function redirect(path) { 
    browserHistory.push('/fake-path'); 
    setTimeout(_ => { 
    browserHistory.replace(path); 
    }, 0); 
} 

... 


<Router history={browserHistory}> 
    <Route path="/" component={AppRoute}> 
    <IndexRoute component={HomeRoute}/> 
    ... 
    <Route path="fake-path" component={_ => null}/> 
    </Route> 
</Router>; 

もっと良い解決策はありますか？

Answer 1

コンポーネントのcomponentWillReceivePropsメソッドを使用して、クエリパラメータの変更を確認できます。

// AppRoute.js 
componentWillReceiveProps(nextProps) { 
    if (this.props.location.query.page !== nextProps.location.query.page) { 
     // handle query parameter change here 
    } 
}