useNavigate フックを使用して React のナビゲーションをマスターする

React で Navigate フックを使用する

useNavigate フックは React Router (v6 以降) の一部であり、アプリケーション内の異なるルート間をプログラムで移動するために使用されます。従来のナビゲーション (リンクのクリックなど) とは異なり、useNavigate フックを使用すると、フォームの送信、ボタンのクリック、状態の変更などのユーザーのアクションに基づいて動的にナビゲートできます。

このフックは React Router v5 の古い useHistory フックを置き換え、機能コンポーネント内のナビゲーションの処理を容易にします。

---

Navigate の使い方

useNavigate フックは、プログラムで特定のルートに移動するために使用できる関数を返します。この関数にパスまたは位置オブジェクトを渡すと、それに応じてナビゲーションが実行されます。

構文:

const navigate = useNavigate();

パラメータ:

• path (文字列): 移動先のパス (例: "/home"、"/profile/:id")。
• オプション (オプション、オブジェクト):
  • replace: ナビゲーションが現在の履歴エントリを置き換えるかどうかを決定するブール値 (デフォルトは false)。
  • state: 新しいルートに渡すことができるオプションの状態。これは、宛先ルートに情報を渡すのに役立ちます。

一般的な使用法:

• 別のルートに移動します。
• 現在の履歴エントリを置き換えます (元に戻すアクションはありません)。
• 追加の状態を宛先ルートに渡します。

---

例: useNavigate を使用した基本的なナビゲーション

ここでは、useNavigate フックを使用して、ユーザーがボタンをクリックしたときにプログラムで移動する方法の簡単な例を示します。

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

説明:

• useNavigate フックは、navigate 関数を取得するために使用されます。
• ボタンをクリックすると goToProfile 関数が呼び出され、navigate('/profile') を使用してプログラム的に /profile ルートに移動します。

---

例: 動的パラメータを使用したナビゲーション

useNavigate を使用して動的ルートに移動し、パラメータを渡すこともできます。

const navigate = useNavigate();

説明:

• navigate(/user/${userId}) は、userId パラメーターに基づいて URL を動的に生成します。
• ユーザー 1 またはユーザー 2 のボタンをクリックすると、/user/1 または /user/2 に移動します。

---

例: 履歴エントリを置換オプションで置換

ナビゲーション中に、新しいエントリをプッシュする代わりに、置換オプションを使用して、履歴スタック内の現在のエントリを置き換えることができます。これは、ユーザーがブラウザの「戻る」ボタンをクリックしても、前のルートには戻らないことを意味します。

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

説明:

• navigate('/ thank-you', { replace: true }) は / thank-you ルートに移動し、履歴スタックの現在のエントリを置き換えます。つまり、ユーザーは次を使用してフォーム送信ページに戻ることはできません。 「戻る」ボタン。

---

例: ナビゲーションによる状態の受け渡し

ナビゲーションとともに追加の状態を渡すことができ、useLocation を使用してターゲット ルートでアクセスできます。

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

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

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

/settings ルートでは、次のように渡された状態にアクセスできます。

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

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

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

説明:

• navigate('/settings', { state: { userId: 123, userName: 'John Doe' } }) は、オブジェクトを state として渡します。
• /settings コンポーネントでは、useLocation を使用して、userId と userName を含む渡された状態にアクセスします。

---

useNavigate の一般的な使用例

1. フォーム送信後のリダイレクト:
   フォーム (ユーザー登録など) を送信した後、ユーザーを成功ページまたはログイン ページにリダイレクトできます。

2. 条件付きナビゲーション:
   ユーザーのアクションや条件 (認証など) に基づいて、異なるルートに動的に移動できます。

3. プログラムによるルーティング:
   アクションの完了時やイベントのトリガー時など、カスタム ロジックに基づいてプログラムで操作できます。

4. API 呼び出し成功後のナビゲーション:
   API 呼び出し (ログインなど) が成功した後、ユーザーをプロフィール ページまたはダッシュボードにリダイレクトできます。

---

結論

React Router の useNavigate フックは、機能コンポーネントでプログラムによるナビゲーションを処理するための強力なツールです。これにより、ユーザーのアクションやアプリケーションの状態に基づいて、異なるルートに動的に移動できます。 useNavigate は、replace や状態を渡す機能などのオプションを使用して、React アプリケーションでのナビゲーション動作を制御するための柔軟性を提供します。

---

以上がuseNavigate フックを使用して React のナビゲーションをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。