react ぬるっと動くアンカーリンクの実装（ページ内での遷移）

はじめに

どうも！フリーエンジニアKeiです🐈

ヘッダーやボタンから別のページでなく、
「同じページの中で、ぬるっと目的の箇所を表示させたい！！」と思い、
探した結果、実装することできたのでまとめました。
（同じページ内でスムーズに目的のセクションに移動する
スムーススクロールの実装方法がわかる記事です）

問題

次の環境でページ内遷移を実装したいけど分からない方向け

環境は
React:18.2.0
tailwindcss:3.4.3

解決方法

① react-anchor-link-smooth-scroll のインストール
②App.jsx への追記

① react-anchor-link-smooth-scroll のインストール

実装したいディレクトリに対してターミナルにて下記を入力

npm install react-anchor-link-smooth-scroll 

起動

npm run dev

②App.jsx への追記

・App.jsxの頭に先ほどインストールしたAnchorLinkをimportする
・クリックしたいところにAnchorLink（funtion App/ divのような感じ）の記述する
・紐づけ（遷移）させたいところにidタグを追加する
・Homeの部分を好きなように変更

App.jsx

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

function App(){
 return(
   <div>
     <AnchorLink href="#Home" onClick={"Home"}>Home</AnchorLink>
   </div>

   <section id="Home">
   </seciton>
 );
}

おわりに

セクションが1つだと分かりにくいので、
複数にコピーして動作確認を確認してみてください。

参考