React Router でプロップを渡す

React Router で Link コンポーネントにプロップを渡す

React Router の Link コンポーネントは、異なるルートにナビゲートするためのリンクを作成します。このコンポーネントには、ルートへのパスを指定する to プロパティがあります。さらに、 Link コンポーネントにプロップを渡し、そのプロップをナビゲーション先のコンポーネントで利用することができます。

コード例

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

function MyComponent() {
  return (
    <div>
      <Link to="/detail" state={{ userId: 123 }}>
        User Details
      </Link>
    </div>
  );
}

この例では、state プロパティを使用して userId をナビゲーション先のコンポーネントに渡しています。

プロップの受け取り

ナビゲーション先のコンポーネントで、useLocation フックを使用して location.state からプロップを受け取ることができます。

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

function DetailPage() {
  const location = useLocation();
  const userId = location.state?.userId;

  return (
    <div>
      User ID: {userId}
    </div>
  );
}

注意

• state プロパティは、一般的に小さなデータの受け渡しに適しています。大きなデータや複雑なオブジェクトを渡す必要がある場合は、他の方法 (例えば、URLパラメータやクエリパラメータ) を検討してください。
• state プロパティは、URLに含まれないため、ブラウザの履歴を直接操作してアクセスした場合には、プロップが失われる可能性があります。

コード例の説明

Link コンポーネントにプロップを渡す

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

function MyComponent() {
  return (
    <div>
      <Link to="/detail" state={{ userId: 123 }}>
        User Details
      </Link>
    </div>
  );
}

• state プロパティ
  ナビゲーション先のコンポーネントに渡すデータをオブジェクトとして指定します。この例では、userId を 123 に設定しています。
• to プロパティ
  ナビゲーション先のルートを指定します。この例では、/detail に設定されています。
• Link コンポーネント
  異なるルートにナビゲートするためのリンクを作成します。

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

function DetailPage() {
  const location = useLocation();
  const userId = location.state?.userId;

  return (
    <div>
      User ID: {userId}
    </div>
  );
}

• オプションチェーン演算子 (?.)：location.state が存在する場合のみ userId を取得します。これにより、location.state が null または undefined の場合にエラーを防ぎます。
• location.state
  Link コンポーネントで渡された state プロパティの値を取得します。
• useLocation フック
  現在のロケーションに関する情報を取得します。

React Router でプロップを渡すための代替方法

URL パラメータ

• 方法
  
  • Link コンポーネントの to プロパティに、URLパラメータを含むパスを指定します。
  • ナビゲーション先のコンポーネントで、useParams フックを使用してパラメータを取得します。
• 利点
  URLに直接含まれるため、ブラウザの履歴を操作してもプロップが保持されます。

例

// Link コンポーネント
<Link to={`/detail/${userId}`}>User Details</Link>

// ナビゲーション先のコンポーネント
import { useParams } from 'react-router-dom';

function DetailPage() {
  const { userId } = useParams();
  // ...
}

クエリパラメータ

// Link コンポーネント
<Link to="/detail?userId=123">User Details</Link>

// ナビゲーション先のコンポーネント
import { useLocation } from 'react-router-dom';

function DetailPage() {
  const location = useLocation();
  const userId = new URLSearchParams(location.search).get('userId');
  // ...
}

カスタムフック

• 方法
  
  • カスタムフックを作成し、プロップの受け渡しと処理を行います。
  • Link コンポーネントでカスタムフックを使用し、ナビゲーション先のコンポーネントでプロップを取得します。
• 利点
  複雑なロジックをカプセル化し、コードの再利用性を向上させます。

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

function useNavigateWithProps(path, props) {
  const navigate = useNavigate();

  return () => {
    navigate(path, { state: props });
  };
}

// Link コンポーネント
<button onClick={useNavigateWithProps('/detail', { userId: 123 })}>User Details</button>

// ナビゲーション先のコンポーネント
import { useLocation } from 'react-router-dom';

function DetailPage() {
  const location = useLocation();
  const userId = location.state?.userId;
  // ...
}