【React Router】画面遷移時に#を用いて特定の要素に移動させる方法 #React

はじめに

React Routerで#をうまく使いこなしたい！という人に向けた記事です。
例えば、アンカータグで#を使う場面として、画面遷移時に特定の要素(例: fugaページのidがpiyoの要素)に移動させたい！という時が考えられます。そんな時は以下のように記述すると上手くいきますよね。

hoge.html

<a href="/fuga#piyo"> fugaページのidがpiyoの要素に移動</a>

fuga.html

<div id="piyo">piyo</div>

このように書くと、fugaページ内のidがpiyoの要素が一番上にくるように画面遷移するのは周知の事実だと思います。

今回、React Routerで同じ動きをするために、安直に以下のように記述してみましたが、上手くいきませんでした。

hoge.jsx

import {Link} from 'react-router-dom';

省略

<Link to="/fuga#piyo">
    fugaページのidがpiyoの要素に移動できない例
</Link>

これだとfugaページに遷移するだけで、idがpiyoの要素には移動しません。react-routerのGitHubのissueでもこの問題は議論されていたようですね。

画面遷移と同時にどうしてもidがpiyoの要素に移動させたい。そんな時はreact-router-hash-linkが便利です。
最初に以下のコマンドでreact-router-hash-linkをインストールします。

yarn add react-router-hash-link

以下のデモページで挙動を確認することができます。
http://react-router-hash-link.rafrex.com/

react-router-hash-linkの<HashLink>を利用すれば上記の問題は解決します。以下のように実装すればOKです。

hoge.jsx

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

省略

<HashLink to="/fuga#piyo">
    fugaページのidがpiyoの要素に移動できる例
</HashLink>

このように、react-router-hash-linkの<HashLink>を用いれば簡単に<a href="/fuga#piyo">のような実装ができます。

他にも同様のライブラリがあるみたいです。
https://github.com/1000ch/react-router-hashlink/blob/master/src/index.js
こちらも試したいと思っています。

React Routerはまだまだ未完成の部分が多いですね。積極的にライブラリを探すか又はライブラリを作成していきたいと思います。
少しでも役に立ったという方はいいねお願いします（^人^）