react-router-redux でハマった

Javascript

忘備録。


react-router-redux v5.0.0-alpha.9 で表示している URL と match.params が一致していないことが起きた。
症状的には https://s8a.jp/react-router-redux-5-does-not-work-correctly#%E7%8F%BE%E8%B1%A1 こちらと同じ。
ブラウザの戻る/進むボタンだが、発生したのは history.push() で URL を書き換えた際に URL と match.params に入ってる値が違う。


どうも仕様みたい。
https://github.com/ReactTraining/react-router/pull/4668#issuecomment-285260711


example にも同様のコードがある。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-redux/examples/BasicExample.js
おそらく Store にある location が同期が取れてないので、ルーティングが始まる前に connect で Store にある location の情報を最新の location で書き換える。