React：react-routerのページ遷移とスクロールトップ

Reactをつかって開発をするときSPAになるように実装するときはreact-routerを利用することで簡単に対応できます。

便利なライブラリですが、ページ遷移時にスクロールの位置が維持される仕様がありました。AngularJSのときは『autoscroll』を宣言すればトップに戻るようになっていたので、Reactにも同じような仕組みがあるかなと検索してみました。

するとこんなIssueが。

ザックリ読んでみるとreact-router-scrollというのが用意されているみたいです。

NPMパッケージとして公開されているので簡単にインストールできます。

$ npm i -S react-router-scroll

インストール後は『import useScroll from 'react-router-scroll';』と『render={applyRouterMiddleware(useScroll())}』を宣言すれば利用できました。

これを利用してつくってみたのがこちら。react-routerでページ切り替え時にスクロール位置を一番上に戻すことができました。

今回の検証中に1つ困った問題に遭遇しました。アンカータグをつかった機能の実装部分です。react-routerでページ切り替えするとき、リンクの『#』をつかって同じページ内の移動がうまくいきませんでした。

これの解決方法は見つけられていないのですがIssueが1つ見つかりました。

ひとまず、react-routerを利用するときは『react-router-scroll』も併せて使えばいいのかなと思います。