在 Day 19 | React入門：React Router 路由控制（下）
這篇文章中有介紹到利用 <Link> 和 <NavLink> 來切換不同的頁面，這種方式就像超連結，適合放在導覽列，讓使用者自行操作。但有些情況下，單純依靠超連結可能不太合適，因此 useNevigate 就能派上用場了

什麼是 useNevigate

useNavigate 是 React Router v6 提供的一個 Hook ，它能讓我們在程式中主動進行導頁，和 <Link> 不同的是：

• <Link>：使用者必須點擊之後才能跳轉畫面
• useNavigate：在處理事件或是函式執行後，程式可以主動帶使用者去到指定的頁面

什麼時候會需要用到 useNevigate

例如：

• 登入帳號密碼並送出表單後，系統應自動導向首頁
• 按下某個按鈕後，依照程式邏輯（例如權限或輸入狀態）決定要導到哪個頁面

useNevigate 的用法

基本用法

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

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

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={() => navigate("/(…)")}>
      </button>
    </div>
  );
}

export default Home;

const navigate = useNavigate()：建立 useNavigate 函式
<button onClick={() => navigate("/(…)")}> </button>：按下按鈕時，呼叫 navigate("/(…)")，就能跳轉到指定頁面（/(…)）

進階用法

除了基本的導頁， useNavigate 還有一些進階的參數和功能
切換頁面
navigate(-1);：返回上一頁
navigate(1);：前往下一頁
適合用在返回按鈕或多步驟流程的頁面中

範例情境：表單送出後導頁

const navigate = useNavigate();

const handleSubmit = (e) => {
  e.preventDefault();
  const blog = { title, body, author };

  fetch('http://localhost:8000/blogs/', {
    method: 'POST',
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(blog)
  }).then(() => {
    console.log('new blog added');
    navigate("/");  
  })
}

程式碼解釋

1. 用 useNavigate() 先建立一個 navigate 函式。
2. 當表單送出後，先透過 fetch 將資料送到後端。
3. 等待 API 回應成功後，呼叫 navigate("/")，導頁回首頁。

瀏覽器執行結果