Zenn
🍏

React Routerの<a>タグ、NavLink、Linkの違いを徹底解説

2024/07/13に公開
JavaScript
Next.js
React
React Router
Remix
tech

Reactでウェブアプリケーションを構築する際、標準の<a>タグ、NavLink、およびLinkを利用してルーティングすることができます。一方でこれらの違いを理解することは、ユーザーエクスペリエンスとアプリケーションパフォーマンスに大きな影響を与えます。この記事では、それぞれの違いを詳細に比較し、特徴や使用方法について解説します。

比較表

以下の表は、<a>タグ、NavLink、およびLinkの主な違いをまとめたものです。

メトリック <a> タグ NavLink Link
ページリロード時間 数百ミリ秒から数秒 数ミリ秒から数百ミリ秒 数ミリ秒から数百ミリ秒
リソースの再ダウンロード 必要 不要 不要
ユーザー体験の待ち時間 長い 短い 短い
初期読み込みパフォーマンス 影響あり 影響なし 影響なし
状態の保持 難しい（状態はリセットされる） 簡単（状態は維持される） 簡単（状態は維持される）
アクティブ状態の管理 手動でクラスやスタイルを設定する必要がある 自動的にアクティブクラスやスタイルを適用可能 手動でクラスやスタイルを設定する必要がある
用途 外部リンクや通常のHTMLナビゲーション ナビゲーションメニューやアクティブリンクの表示 シンプルな内部リンク
プロパティ href to, replace, activeClassName, activeStyle to, replace, innerRef

※ページリロード時間はページ全体のリロード時間に依存します。そのため、参考値として参照ください。

概要、特徴、使い方の詳細

<a> タグ

  • 概要: 標準的なHTMLアンカータグで、ページ遷移を行う。

  • 特徴:

    • ページリロード: リンク先に遷移するたびにページ全体がリロードされる。
    • リソース再ダウンロード: すべてのリソース（CSS、JavaScript、画像など）が再度ダウンロードされる。
    • ユーザー体験: ページ全体のリロードにより、待ち時間が長くなる。
    • 初期読み込みパフォーマンス: ページリロードによる影響がある。
    • 状態の保持: リロードによって状態がリセットされる。

  • 使い方:

    <a href="/about">About Us</a>

  • 概要: React Routerのコンポーネントで、アクティブ状態の管理が可能なナビゲーションリンクを作成する。

  • 特徴:

    • ページリロード: なし。クライアントサイドでの遷移。
    • リソース再ダウンロード: 不要。
    • ユーザー体験: 短い待ち時間でスムーズな遷移。
    • 初期読み込みパフォーマンス: 影響なし。
    • 状態の保持: 状態が維持される。
    • アクティブ状態の管理: URLに基づいて自動的にアクティブクラスを適用。

  • 使い方:

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

function NavigationBar() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
    </nav>
  );
}

  • 概要: React Routerの基本的なナビゲーションリンクコンポーネント。

  • 特徴:

    • ページリロード: なし。クライアントサイドでの遷移。
    • リソース再ダウンロード: 不要。
    • ユーザー体験: 短い待ち時間でスムーズな遷移。
    • 初期読み込みパフォーマンス: 影響なし。
    • 状態の保持: 状態が維持される。
    • アクティブ状態の管理: 手動でクラスやスタイルを設定する必要がある。

  • 使い方:

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

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

まとめ

<a>タグ、NavLink、およびLinkの違いを理解することで、適切なコンポーネントを選択し、ユーザーエクスペリエンスとアプリケーションパフォーマンスを最適化できます。<a>タグは外部リンクや標準のHTMLナビゲーションに適していますが、NavLinkとLinkはReact Routerを使用したSPA内でのナビゲーションに最適です。それぞれの用途に応じたコンポーネントを選び、スムーズで効率的なナビゲーション体験を提供しましょう！

参考文献

https://developer.mozilla.org/ja/docs/Web/HTML/Element/a
https://reactrouter.com/en/main/components/nav-link
https://reactrouter.com/en/main/components/link

Discussion