読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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())}』を宣言すれば利用できました。
f:id:tyoshikawa1106:20160806205128p:plain


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


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


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


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