React Router v4 リンク比較

React Router v4 では、ナビゲーションのための２つの主要なコンポーネント、<Link> と <NavLink> が提供されています。どちらもクリック可能な要素を作成してアプリケーション内の別の部分へナビゲートしますが、アクティブな状態の扱い方に重要な違いがあります。

<Link>

• アクティブなルートの視覚的な表示はしません。
• リンクをクリックすると、指定されたルートに遷移します。
• 基本的なナビゲーションリンクを作成するためのシンプルな方法です。

<NavLink>

• activeClassName プロパティを使用して、アクティブなリンクに適用するクラス名を指定できます。
• <Link> の機能に加えて、リンクがアクティブ状態にあるかどうかを認識できます。
• ナビゲーションバーやメニューを作成し、現在アクティブなリンクを視覚的に強調表示したい場合に使用します。

いつどのコンポーネントを使うべきか？

• <NavLink>: ナビゲーションバーやメニューを作成し、アクティブなリンクを強調表示したい場合。
• <Link>: 単純にクリック可能な要素でアプリケーション内の別の部分にナビゲートしたい場合。アクティブなルートの視覚的な表示が必要ない場合。

例

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

// <Link> の例
<Link to="/">ホーム</Link>
<Link to="/about">私たちについて</Link>

// <NavLink> の例
<NavLink exact to="/" activeClassName="active">ホーム</NavLink>
<NavLink to="/about" activeClassName="active">私たちについて</NavLink>

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

// <Link> の例
<Link to="/">ホーム</Link>
<Link to="/about">私たちについて</Link>

// <NavLink> の例
<NavLink exact to="/" activeClassName="active">ホーム</NavLink>
<NavLink to="/about" activeClassName="active">私たちについて</NavLink>

コードの説明

1. インポート
   

2. <Link> の例
   

   • <Link> コンポーネントは、シンプルなナビゲーションリンクを作成します。
   • to プロパティでリンク先のルートを指定します。
3. • <NavLink> コンポーネントは、アクティブなリンクの視覚的な強調表示を行うナビゲーションリンクを作成します。
   • アクティブなリンクには、指定したクラスが適用され、スタイルが変更されます。

アクティブなリンクのスタイル設定

• CSS で .active クラスを定義して、アクティブなリンクのスタイルをカスタマイズします。

  .active {
      font-weight: bold;
      color: blue;
  }
  

これにより、アクティブなリンクが太字で青色で表示されます。

• <NavLink> はアクティブなリンクの視覚的な強調表示が必要な場合に使用します。
• <Link> はシンプルなナビゲーションリンクの作成に使用します。

<NavLink> と <Link> 以外にも、React Router v4 ではナビゲーションを実現するいくつかの方法があります。

useNavigate Hook

• この方法により、ボタンクリックやフォーム送信などのイベントハンドラ内でナビゲーションをトリガーすることができます。
• useNavigate Hook を使用することで、プログラム的にルートに遷移できます。

``javascript import { useNavigate } from 'react-router-dom';

const MyComponent = () => { const navigate = useNavigate();

   const handleClick = () => {
       navigate('/about');
   };

   r   eturn (
       <button onClick={handleClick}>About</button>
   );

}; ``

useHistory Hook

• この方法により、前のページに戻る、次のページに進む、特定のページに直接移動などの操作が可能になります。
• useHistory Hook を使用して、ブラウザの履歴を操作できます。

   const goBack = () => {
       history.goBack();
   };

   const goForward = () => {
       history.goForward();
   };

   return (
       <div>
           <button onClick={goBack}>Back</button>
           <button onClick={goForward}>Forward</button>
       </div>
   );

選択する方法は、特定のユースケースによって異なります。

• ブラウザ履歴の操作
  useHistory Hook を使用します。
• プログラム的なナビゲーション
  useNavigate Hook を使用します。
• アクティブなリンクの強調表示
  <NavLink> を使用します。
• シンプルなリンクの作成
  <Link> を使用します。