発行:

ユーザー体験を高める便利な機能

React Routerには、基本的な画面遷移以外にも、アプリケーションの品質（UX）を一段階引き上げるための機能が標準搭載されています。ここでは特に実務で必須となる2つを紹介します。

アクティブなリンクを明示する (NavLink)

ナビゲーションバーなどで、「今どのページにいるか」を視覚的にフィードバックすることは非常に重要です。

isActiveプロパティの活用

NavLink コンポーネントを使用すると、現在のURLと to プロパティが一致しているかどうかを判定できます。

src/components/NavBar.jsx
import { NavLink } from "react-router-dom";

const NavBar = () => {
  return (
    <nav className="flex gap-4">
      {/* classNameに関数を渡して、状態に応じたクラスを付与できる */}
      <NavLink
        to="/"
        className={({ isActive }) =>
          `px-4 py-2 rounded-lg transition-all ${
            isActive ? "bg-indigo-600 text-white" : "text-slate-400 hover:text-white"
          }`
        }
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) =>
          isActive ? "text-indigo-400 font-bold" : "text-slate-500"
        }
      >
        About
      </NavLink>
    </nav>
  );
};

このように、CSSクラスの切り替えをJSの条件分岐なしで（正確にはプロップ経由で）宣言的に記述できます。

スクロール位置の管理 (ScrollRestoration)

SPAでは、リンクを踏んでもブラウザ全体の再読み込みが起きないため、スクロール位置が予期せぬ状態で維持されることがあります。

SPAにおけるスクロール問題

例えば、長い記事の「一番下」まで読み、そこにあるリンクから別記事へ飛んだとします。この時、ブラウザの「再読み込み」がないため、新しいページが表示された瞬間に「最初から一番下が表示されている」という不自然な挙動になることがあります。

ScrollRestorationコンポーネントの配置

これを防ぐには、RootLayout（または最上位のコンポーネント）に <ScrollRestoration /> を配置するだけです。

src/RootLayout.jsx
import { Outlet, ScrollRestoration } from "react-router-dom";

export const RootLayout = () => {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
      {/* ページ遷移時に自動でスクロール位置をTOPに戻し、戻るボタンでは位置を復元する */}
      <ScrollRestoration />
    </div>
  );
};

これだけで、ユーザーは通常のWebサイトと同じ「遷移したらTOPへ、戻るボタンなら元の場所へ」という快適な挙動を享受できます。

まとめ

本シリーズを通じて、React Routerの強力な機能群を見てきました。

  • createBrowserRouter : 構造化されたルート定義
  • Nested Routes & Outlet : 効率的なレイアウト設計
  • Loader & Action : ゼロ状態管理のデータ通信
  • Navigate & NavLink : 直感的なナビゲーション
  • ScrollRestoration : UXの最終仕上げ

これらを組み合わせることで、もはや「単なるライブラリ」を超えた、フルスタックな開発体験が可能になります。