react-router と ReactCSSTransitionGroup を組み合わせてページ遷移時のアニメーションを実装したメモ。
サンプルを参考に進めれば容易であった。
しかし細かい挙動に凝り始めると、提供されているハイレベルなAPIでは難しくなってくる。
今回はページ遷移時にスクロールポジションが維持されてしまう問題の修正に少しハマった。
結果的に react-router 側を微調整して完了となった。
1 window.scrollTo(0, 0)} history={createBrowserHistory()}> 2 ...</Router>
これでページ遷移時に強制的にスクロールポジションをトップへ固定することができる。
ただこの方法だとブラウザバックの際にも window.scrollTo(0, 0) が発動してしまいユーザビリティが損なわれる。
結果的に下記の方法を採用した。
1const history = createBrowserHistory();
2history.listen(location => {
3 setTimeout(() => {
4 if (location.action === 'POP') {
5 return;
6 }
7
8 window.scrollTo(0, 0);
9 });
10});
11
12const routes = (
13 // ... </Router>
14);これでブラウザバック時は前回のスクロールポジションを維持することができる。
ちなみに下記のようなものもあるらしい。