【React】Reactでページ内リンクを実装できるライブラリ「react-router-hash-link」

今回は、React でページ内リンクを実装する方法についてです。
最終的には別の方法を使ったので、このライブラリは使用しないことにしたのですが、念のため備忘録としてまとめ。
もしかしたら、今後別のアプリで使うかもしれませんしね！

GitHub のページはこちら。

GitHub – rafgraph/react-router-hash-link: Hash link scroll functionality for React Router
https://github.com/rafgraph/react-router-hash-link

「react-router-hash-link」というライブラリです。
デモサイトへのリンクもありますので、どのようなことができるのかはこちらでご確認ください。

ライブラリのインストールは下記のコマンドで行います。

npm install --save react-router-hash-link

なお、yarn を使う場合は yarn add react-router-hash-link を実行してください。

インストールが完了したら、あとは任意の場所でインポートして使うだけ！
インポート文は下記のとおりです。

import { HashLink } from 'react-router-hash-link';

で、下記のように記述すると、ページ内ジャンプを行えるリンクを設置することができます。

<HashLink to="#photo">写真の場所へジャンプ</HashLink>

上記のリンクをクリックすると、ID に photo が指定された要素に一瞬でスクロールしてくれます。

なお、スクロール時にアニメーションをしてほしい場合は smooth というオプションを指定します。
サンプルコードは下記のとおりです。

<HashLink smooth to="#photo">写真の場所へジャンプ</HashLink>

上記のように指定すると、リンクをクリックした際に、スイーっとアニメーションしながらその要素までスクロールしてくれます。

他にもスクロール時に実行する関数を指定したりもできますが、私は使わなかったのでこちらについては未検証です。

以上、Reactでページ内リンクを実装できるライブラリ「react-router-hash-link」のご紹介でした。
ご参考になれば幸いです。