Reactでページ内リンクを実装する

Reactプロジェクトでページ内リンクを実装しようとした時の話。
先月いろんなモジュール試してみてもできなかったのにさっき調べたらサラッとできたからこの感動よ誰かに届け

そもそもやりたいこと

• ページ内遷移（<a href="#hoge"></a>的な）
• スムーススクロール（リンク踏んだらその場所までアニメーションするやつ）
• 高さ指定（headerの高さ分だけ空けたい）

なんかスムーススクロールに関してはjQuery→jsの書き換えの時点でもつまづいた気がします。
jQueryって本当に便利マン

とりあえずページ内遷移ができていれば最悪OKで。

とりあえずreact-router-domでやってみる

まぁ最初に思いつくのがこれですよね

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

<Link to="#link1">リンク1へ移動</Link>

<div id="link1">リンク1</div>

どうやらこのLinkタグさん、ページ内リンクに対応していないらしいですね。
aタグって万能だったんだなぁ・・・

モジュールを片っ端から調べてみる

本当に色々触ってみましたが有力そうなのをいくつか。

react-router-hash-link

【React Router】画面遷移時に#を用いて特定の要素に移動させる方法
この方がわかりやすく紹介してくださっていたり、「react ページ内リンク」とかで調べると真っ先に出てくるやつです
https://github.com/rafrex/react-router-hash-link

hoge.jsx

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

<HashLink smooth to="/hoge#link1">リンク1へ移動</HashLink>

<div id="link1">リンク1</div>

なんとsmoothと書くだけでいい感じにアニメーションまでしてくれるらしい。
最高やん！これに決めた！

と、思っていたのですがなぜかsmoothの指定をすると遷移先が微妙にずれる・・・
本当に色々やって見たのですがmarginやらpaddingやらを全部抜いたらうまくいったんですけど流石に現実的ではないですね。
上記で紹介した記事の方のように恐らく通常はうまくいくんだと思います。
是非お試しください。

react-router-hashlink

めっちゃ紛らわしい
前述のモジュールとの名前の違いが「-」のみです。
気がつかずにそっちの実装方法で試してみちゃったりしました。
https://1000ch.net/posts/2017/react-router-hashlink.html

オプションなどはそちらで詳しくみていただくとして

hoge.jsx

import { HashLink } from 'react-router-hashlink';

<HashLink to="/hoge#link1" behavior="smooth">リンク1へ移動</HashLink></li>

<div id="link1">リンク1</div>

こちらもスムーススクロールの指定が非常に簡単ですね。素敵。
しかしこちらも同じく高さがずれます。なんなんでしょう。

流石にこれはモジュールのせいではなくこっちの問題なんだろうと思いましたが、もうどこか悪いのかもさっぱりわからない。
完全に途方にくれてそっとプロジェクトの残タスクに放置して他のことを進めていました。
そしてふと思い出して他のモジュールを使ってみると・・・

react-anchor-link-smooth-scroll

https://github.com/mauricevancooten/react-anchor-link-smooth-scroll
見つけてしまいました。

hoge.jsx

import AnchorLink from 'react-anchor-link-smooth-scroll';

<AnchorLink href="#link1" offset="50">リンク1へ移動</AnchorLink>

<div id="link1">リンク1</div>

名前にsmooth-scrollと付いている通りデフォルトでスムーススクロールを行なってくれるみたいです。
しかも高さ指定も簡単。
ここの値をwindow幅に応じて変化するようにすればレスポンシブ対応も問題ないですね。

結論

あくまで私の環境下ではreact-anchor-link-smooth-scrollだけが正常に動きましたが、
皆さんも色々試してみてどれが良いか模索してみてはどうでしょうか。

というか今回でとても痛感しているんですが、
素のjsやらjQueryやら今回のreactやら使う技術が少し変わるだけで実装方法が変わってしまってしんどいですね。
フロントエンドエンジニアとして働き始めて9ヶ月程度ですが、スライダーだけで３種類くらい探してる気がします。