今回は、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」のご紹介でした。
ご参考になれば幸いです。
