使用 useNavigate Hook 掌握 React 中的導航-js教程-PHP中文網

Mastering Navigation in React with the useNavigate Hook

在 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;

登入後複製