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

reactでページ内リンクを実装するとき、HTMLと同様の書き方ではうまくいきませんでした🥲
そこで、react-anchor-link-smooth-scroll というライブラリをつかって実装したのでご紹介します！

つかい方

1. インストール

npm install react-anchor-link-smooth-scroll

2. importして、AnchorLink をつかって書く

import React from "react";
import ReactDOM from "react-dom";
import AnchorLink from "react-anchor-link-smooth-scroll";

const SmoothScroll = () => (
  <div className="main">
    <ul>
      <li>
        {/* htmlでは:<a href="#dog">いぬ</a> */}
        <AnchorLink href="#dog">いぬ</AnchorLink>
      </li>
      <li>
        {/* htmlでは:<a href="#cat">ねこ</a> */}
        <AnchorLink href="#cat">ねこ</AnchorLink>
        </li>
    </ul>

    <section id="dog">
      <span role="img" aria-label="dog">
        🐶
      </span>
    </section>
    <section id="cat">
      <span role="img" aria-label="cat">
        🐱
      </span>
    </section>
  </div>
);

ReactDOM.render(<SmoothScroll />, document.getElementById("root"));

sandbox で動き見れます👀（sandbox上ではaタグでも動く...なぜ😯）