NavLinkを使ってみた（備忘録）

NavLinkとは

<Link>の特別な種類で、それが「アクティブ」か「保留中」か「遷移中」かを知っています。

ナビゲーションメニューでどれが現在選択されているかを表示するのに便利です。

デフォルトでは、<NavLink>コンポーネントがアクティブになるとactiveクラスが追加されるので、CSSを使ってスタイルを設定することができます。

サンプルコード

return (
    <div className={styles['header-nav']}>
      <nav>
        <ListItem>
          <ul>
            <NavLink
              to="/pagea"
              className={({ isActive }) => (isActive ? styles['active'] : '')}
            >
              ページA
            </NavLink>
          </ul>
          <ul>
            <NavLink
              to="/pageb"
              className={({ isActive }) => (isActive ? styles['active'] : '')}
            >
              ページB
            </NavLink>
          </ul>
          <ul>
            <NavLink
              to="/pagec"
              className={({ isActive }) => (isActive ? styles['active'] : '')}
            >
              ページC
            </NavLink>
          </ul>

classNameプロップは通常のclassNameのように動作しますが、リンクのアクティブ状態と保留状態に基づいて適用されるclassNameをカスタマイズするために関数を渡すこともできます。