使用 useNavigate Hook 掌握 React 中的導航

在 React 中使用Navigate Hook

useNavigate 鉤子是 React Router（v6 及更高版本）的一部分，用於以程式設計方式在應用程式中的不同路由之間導航。與傳統導航（例如點擊連結）不同，useNavigate 掛鉤可讓您根據使用者操作動態導航，例如表單提交、按鈕點擊或狀態變更。

這個鉤子取代了 React Router v5 中較舊的 useHistory 鉤子，並且可以更輕鬆地處理功能組件內的導航。

---

useNavigate 的工作原理

useNavigate 掛鉤傳回一個可用於以程式設計方式導覽至特定路線的函數。您可以將路徑或位置物件傳遞給此函數，它將相應地執行導覽。

文法：

const navigate = useNavigate();

參數：

• 路徑（字串）：導覽到的路徑（例如「/home」、「/profile/:id」）。
• 選項（可選，物件）：
  • 替換：一個布林值，確定導航是否應替換當前歷史記錄條目（預設為 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 鉤子用於取得導航功能。
• 按一下按鈕時，將呼叫 goToProfile 函數，該函數使用 navigator('/​​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' } }) 傳遞一個物件作為狀態。
• 在 /settings 元件中，我們使用 useLocation 來存取傳遞的狀態，其中包含 userId 和 userName。

---

useNavigate 的常見用例

1. 表單提交後重定向:
   提交表單（例如使用者註冊）後，您可以將使用者重新導向至成功或登入頁面。

2. 條件導航:
   根據使用者操作或條件（例如身份驗證），您可以動態導航到不同的路線。

3. 程式路由:
   您可以根據自訂邏輯以程式設計方式導航，例如操作完成或觸發事件時。

4. API 呼叫成功後導覽:
   成功呼叫 API 後（例如登入），您可以將使用者重新導向到他們的個人資料頁面或儀表板。

---

結論

React Router 中的 useNavigate 鉤子是一個強大的工具，用於處理功能元件中的程式導航。它允許您根據使用者操作或應用程式狀態動態導航到不同的路線。借助替換等選項和傳遞狀態的能力，useNavigate 為控制 React 應用程式中的導航行為提供了靈活性。

---

以上是使用 useNavigate Hook 掌握 React 中的導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！