React-scrollを使ってナビゲーションバーからスクロール・例

Reactアプリでナビゲーションバーから所定の位置にスクロールしたかったので、React-scrollを使いました。
https://github.com/fisshy/react-scroll/blob/master/README.md

Sandbox上に作ったシンプルな例です。
https://codesandbox.io/s/react-scroll-with-nav-simple-test-3w30ki
Previewの画面ではNavが表示されないので、オプションから新しい画面を開く必要があります。例ではNavのためにBootstrapを使っていますがなくても使えます。

使用方法としてはnpmまたはyarnでプロジェクトにインストールして

npm install react-scroll

ImportしたLinkの「to」と行き先のElementの「name」を合わせると使えます。

import { Link, Element } from "react-scroll";
export default function App() {
     <Link to="jump">
          リンク先にジャンプ
     </Link>
    〜
    <Element name="jump">
        リンク先
    </Element>
}

ジャンプした先が隠れてしまう場合は、
Linkに　offset={数値}　などを入れると調整できます。

     <Link to="jump"　offset={-100}>
          リンク先にジャンプ
     </Link>

他にも
smooth={true}でスクロールアニメーション
duration={500}で0.5秒のアニメーション
activeClass="active"でactiveのクラスが追加で色を変えたりなど
spy={true}　画面上の位置から自動的にacitiveClassを更新
などがあります。
詳しくは
https://github.com/fisshy/react-scroll/blob/master/README.md#propsoptions