ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

react-router-v4 でリンクが変わってもスクロールの高さが初期化されない問題を解決する

リンクが変わっているのに、前のページのscrollHeightを引き継いでしまうことがありました。

以下のように、browserHistory.listen()にトリガーさせて、スクロール位置を初期化させるコードを挿入するようにしたら、解決しました。

import { Router, Route, Link, Switch } from "react-router-dom";
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory();

browserHistory.listen((location, action) => {
  window.scrollTo(0, 0);
});

...
class App extends Component {
  ...
  render(){

      <Router history={browserHistory}>
...
      </Router>
  }
}