SPAのページ遷移した時の画面位置がおかしいのをなんとかしたい

背景

ReactとReduxを使って業務効率化アプリを作っていて、タイトルの内容でもやもやした時のお話です。
機能もある程度実装して、レスポンシブ対応をして、あとはテストをすればリリースだー！

…と思いきや、スマホの画面を見てみようと実機で触ってみるとページ遷移するたびに画面が変なところにスクロールした状態でレンダリングされてしまう…

原因不明

原因を追求する為にググってみるもなんの成果もなし。（ググり方がいけないのかもしれない）

ただ、SPAって実際にページ遷移してるわけじゃないから、スクロール位置がそのまま維持されてるんじゃないか説は割と濃厚そうな予感はしてる。

なんとかしたい（した）

Reactを使っているので、react-routerでルーティングを行なっています。
react-routerにはonEnterというページ遷移時のミドルウェアを挟むための便利な属性があるみたいで、これを用いてなんとかしました。

app.jsx

// 省略

<Provider store={ store }>
  <Router history={ history }>
    <Route path="/" component={ App }>
      <Route path="/hoge" component={ hoge } onEnter={ checkEnter } /> // ページ遷移した時に呼び出される
    </Route>
  </Router>
</Provider>

function checkEnter() {
  window.scroll(0, 0); // ページの一番上に移動
}

これで解決✨
ただ原因はちゃんと掴めていないし、その場しのぎ感が否めないので、もしこうなってしまう原因をご存知の方がいらしたらご教授いただけたらと思います…

それにしてもこのonEnterとても便利だ。
色々なことに使えそう。