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』も併せて使えばいいのかなと思います。