react-scrollを実装してみた

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

smoothなスクロールを実装したい！

まずはreact-scrolをインストール

$ npm install react-scroll

Linkタグを使用します！Linkの後にオプションをつけます。これはgithubにある公式のドキュメントからコピペできます。
to=には移遷したい先のIdを指定しましょう。

smoothスクロールを実装するため、smoothはtrueにしておきます。offsetはpadding-topのようなもので、移遷する位置を指定できます。durationにはスクロールする秒数を指定しましょう。

⬇️Props/Optionsを見てください
react-scroll

TopPage/index.js

import React from 'react';
import { Link } from 'react-scroll'

省略

<nav>
   <ul className="navi">
    　<li>
     　　<Link activeClass="active" to="Home" spy={true} smooth={true} offset={50} duration={500}>
             Home
         </Link>
      </li>

      <li>
         <Link activeClass="active" to="about" spy={true} smooth={true} offset={50} duration={500}>
            about
         </Link>
      </li>
   </ul>
</nav>

省略

 <section className="Home" name="Home">
 </section>

 <section className="about" name="about">
 </section>

上記のようにto=には移遷したい先のIdはname="Home"の様に指定する必要があります。
これでsmoothなスクロールを実現できました！

参考記事

・react-scroll
・Implementing Smooth Scrolling in React
・React-Scrollでsmoothなスクロールを実装してみた。