浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

  • この記事いいね! (0)