React Router v4 で迷わないナビゲーションメニュー作成：NavLink と Link の決定的な違い

React Router v4 での <NavLink> と <Link> の利点

<NavLink> の利点

• アクティブなリンクの強調表示: <NavLink> は、現在の URL と一致するリンクを自動的にハイライトする active プロパティを持ちます。これは、ナビゲーションメニューやタブバーなどのインターフェースで、ユーザーが現在どのページにいるのかを視覚的に示すのに役立ちます。
• スタイルのカスタマイズ: <NavLink> には、activeClassName と exact プロパティを使用して、アクティブなリンクのスタイルをカスタマイズするためのオプションがあります。これにより、開発者はアプリケーションの外観と一致するハイライトスタイルを簡単に作成できます。
• 追加のコールバック: <NavLink> には、isActive と isCurrent の2つの追加コールバックプロパティがあります。これらのコールバックは、アクティブなリンクの状態に基づいて条件付きロジックを実行するために使用できます。

• シンプルで軽量: <Link> は <NavLink> よりもシンプルで軽量なコンポーネントです。そのため、パフォーマンスが重要な場合や、シンプルなナビゲーションリンクを作成する場合に適しています。
• 柔軟性: <Link> は <NavLink> と同じように動作しますが、アクティブなリンクの強調表示機能はありません。これは、開発者が独自のスタイルやロジックを使用してアクティブなリンクを強調表示したい場合に役立ちます。
• アクセシビリティ: <Link> は、スクリーンリーダーなどの補助技術と互換性があります。これは、視覚障がい者を含むすべてのユーザーにとって、ナビゲーションをよりアクセスしやすくするため重要です。

どちらを選ぶべきか？

<NavLink> と <Link> のどちらを選択するかは、アプリケーションのニーズと要件によって異なります。

• ナビゲーションメニューやタブバーでアクティブなリンクを強調表示したい場合は、<NavLink> が最適です。
• パフォーマンスが重要な場合や、シンプルなナビゲーションリンクを作成する場合、または独自のスタイルやロジックを使用してアクティブなリンクを強調表示したい場合は、<Link> が最適です。

最終的には、両方のコンポーネントを試して、アプリケーションに最適なものを判断することをお勧めします。

例

以下の例は、<NavLink> と <Link> を使用してナビゲーションメニューを作成する方法を示しています。

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

const Navigation = () => {
  return (
    <nav>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </nav>
  );
};

export default Navigation;

この例では、<NavLink> コンポーネントを使用して、現在の URL と一致するリンクをハイライトしています。 activeClassName プロパティを使用して、アクティブなリンクの CSS クラスを active に設定しています。

以下の例は、<Link> コンポーネントを使用して、シンプルなナビゲーションリンクを作成する方法を示しています。

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

const Navigation = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
};

export default Navigation;

この例では、<Link> コンポーネントを使用して、3 つのナビゲーションリンクを作成しています。これらのリンクは、現在の URL と一致しても強調表示されません。

import React from 'react';
import { NavLink, Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
      <Link to="/profile">Profile</Link>
    </nav>
  );
};

export default Navigation;

このコードでは、以下のことが行われています。

• react と react-router-dom パッケージをインポートします。
• Navigation という名前の関数コンポーネントを定義します。
• NavLink コンポーネントを使用して、3 つのナビゲーションリンクを作成します。
  • 各リンクには、to プロパティを使用して、リンク先の URL を指定します。
  • activeClassName プロパティを使用して、アクティブなリンクの CSS クラスを active に設定します。
• Link コンポーネントを使用して、1 つのナビゲーションリンクを作成します。
  • このリンクは、現在の URL と一致しても強調表示されません。

このコードを実行すると、以下のナビゲーションメニューが表示されます。

Home | About | Contact | Profile

• "Home"、"About"、"Contact" リンクは、現在の URL と一致すると強調表示されます。
• "Profile" リンクは、常に同じスタイルで表示されます。

追加の例

import React from 'react';
import { NavLink, Link } from 'react-router-dom';

const Navigation = () => {
  return (
    <nav>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
      <NavLink to="/products" activeClassName="active">Products</NavLink>
      <NavLink to="/products/category1" activeClassName="active">Category 1</NavLink>
      <NavLink to="/products/category2" activeClassName="active">Category 2</NavLink>
      <Link to="/profile">Profile</Link>
    </nav>
  );
};

export default Navigation;

Home | About | Contact | Products | Category 1 | Category 2 | Profile

• "Products" リンクは、現在の URL が /products である場合に強調表示されます。
• "Category 1" と "Category 2" リンクは、現在の URL が /products/category1 または /products/category2 である場合に強調表示されます。

アクセシビリティ

• <Link> は、<NavLink>よりもアクセシビリティに優れています。これは、スクリーンリーダーなどの補助技術と互換性があるためです。
• <NavLink> は、aria-current 属性を使用してアクセシビリティを向上させることができます。ただし、これは <Link> ほど効果的ではありません。

パフォーマンス

• <NavLink> は、追加の機能 (アクティブなリンクの強調表示など) を備えているため、パフォーマンスへの影響が大きくなります。

コードの簡潔性

• <Link> は、<NavLink>よりもコードが簡潔です。これは、オプションのプロパティが少ないためです。
• <NavLink> は、アクティブなリンクの強調表示をカスタマイズするために、追加のプロパティが必要になる場合があります。

用途例

• <NavLink> は、ナビゲーションメニューやタブバーなどのインターフェースで使用するのが適しています。これは、アクティブなリンクを視覚的に示すことができるためです。
• <Link> は、シンプルなナビゲーションリンクや、独自のスタイルやロジックを使用してアクティブなリンクを強調表示したい場合に適しています。

<NavLink> と <Link> は、どちらも React Router v4 で便利なコンポーネントです。どちらを選択するかは、アプリケーションのニーズと要件によって異なります。