[React, react-router-dom v6]表示されているメニュー項目の背景色を変更するなどして目立たせる

やりたいこと

サイドバーメーニューなどで画面遷移する際、現在表示されている項目の背景色を変更するなどして表示項目を目立たせたい。

おそらく良くないやり方

個人開発で作成しているポートフォリオサイトではuseLocation().pathnameで現在表示されているパスをnowPageというstateにセットし、メニューボタンが押されるたびにsetNowPageでnowPageを更新、各項目のリンクとnowPageが同じならばクラス名にactiveを付与するという面倒臭いやり方をしていた。

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

const Menu = () => {
  const [nowPage, setNowPage] = useState(useLocation().pathname);
  return (
    <li
      onClick={() => {
        setNowPage(item.link);
      }}
    >
      ...
      (項目のpathとnowPageを比較してクラス名にactiveを付与する処理)
      ...
    </li>
  )
}

しかしそれだと別コンポーネントで画面遷移をしたい場合、nowPageを更新できないため正しい表示にならない。

改善方法

よくよく調べたらめちゃくちゃ簡単でreact-router-domのNavLinkを使用するだけ。
これを使用すると現在のパスと同じパスをtoに持つNavLinkタグにactiveクラス名を勝手に付与してくれる。(react-router-dom v6の場合)

ただ以下のような場合にはprofileを開いていても両方の<NavLink>タグにactiveクラス名が付与されてしまう。

<NavLink to="/">
  HOME
</NavLink>
<NavLink to="/profile">
  PROFILE
</NavLink>

今回の/と/profileのようにURL同士でパス文字列を内包する場合はそれぞれに属性としてendを追加する。

<NavLink end to="/">
  HOME
</NavLink>
<NavLink end to="/profile">
  PROFILE
</NavLink>

こうすることで現在表示されているページの項目のみにスタイルが適用されるようになる。