【react-router】遷移する度にページの一番上へスクロールさせる

【react-router】遷移する度にページの一番上へスクロールさせる
スポンサーリンク

どうも、イソップです。

Reactアプリでは、リンクでページ遷移しても画面が書き換わって更新されるだけで、ページのスクロールまでは管理されません。

react-routerを利用している場合、ページ遷移をするタイミングに任意の処理を実行できます。

react-routerのonChangeコールバックを使う

react-routerの onChange コールバックを使います。
onChange コールバックは、ページのパスが書き変わった度に実行されます。

次のコードを見てください。

import React from "react";
import { Route } from "react-router";

import App from "components/App";
import Profile from "components/Profile";

// onChangeに渡すコールバック
const handleLocationChange = (prevState, nextState) => {
  if (nextState.location.action !== "POP") {
    window.scrollTo(0, 0);
  }
};

export default (
  <Provider store={store}>
      <Router history={history}>
         {/* onChange */}
          <Route path="/" component={App} onChange={handleLocationChange}>
            <Route path="profile" component={Profile} />
            ...
          </Route>
      </Router>
  </Provider>
);

ページが進む度に、window.scrollTo(0, 0)を実行するコールバック関数を渡しています。
これは、pathが / 配下のURL全てに適用されます。

その他にも、ページに入った時に実行される onEnter や、ページを抜ける時に実行する onLeave などもあります。

【参考】Scroll to top on route change?

スポンサーリンク