useNavigation

此掛勾提供您需要了解關於頁面導航的一切，以建構處理中導航指示器以及資料突變上的樂觀 UI。像

• 全域載入指示器
• 在突變發生時停用表單
• 在提交按鈕加上忙碌指示器
• 在於伺服器中建立時樂觀顯示一筆新記錄
• 在更新時樂觀顯示記錄的新狀態

此功能僅在使用資料路由器時運作，請參閱 挑選路由器

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

function SomeComponent() {
  const navigation = useNavigation();
  navigation.state;
  navigation.location;
  navigation.formData;
  navigation.json;
  navigation.text;
  navigation.formAction;
  navigation.formMethod;
  navigation.formEncType;
}

useNavigation().formMethod 欄位在沒有 future.v7_normalizeFormMethod 未來標記 時為小寫。這正在標準化為大寫以符合 v7 中的 fetch() 行為，因此請將您的 React Router v6 應用程式升級為採用大寫的 HTTP 方法。

navigation.state

• 空閒 - 沒有導航等待中。
• 提交中 - 由於表單使用 POST、PUT、PATCH 或 DELETE 提交而呼叫了路由動作。
• 載入中 - 正在呼叫下一個路由的載入器來渲染下一個頁面。

一般的導航和 GET 表單提交會經過這些狀態。

idle → loading → idle

透過 POST、PUT、PATCH 或 DELETE 提交的表單會經過這些狀態變遷

idle → submitting → loading → idle

這是一個簡單的提交按鈕，它會在導航狀態變更時變更其文字

function SubmitButton() {
  const navigation = useNavigation();

  const text =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
      ? "Saved!"
      : "Go";

  return <button type="submit">{text}</button>;
}

navigation.state 提供了作用中導航的高階狀態，你可以將其與其他 navigation 方面結合，推論出更精細的資訊

// Is this just a normal load?
let isNormalLoad =
  navigation.state === "loading" &&
  navigation.formData == null;

// Are we reloading after an action?
let isReloading =
  navigation.state === "loading" &&
  navigation.formData != null &&
  navigation.formAction === navigation.location.pathname;

// Are we redirecting after an action?
let isRedirecting =
  navigation.state === "loading" &&
  navigation.formData != null &&
  navigation.formAction !== navigation.location.pathname;

navigation.formData

任何從 <Form> 或 useSubmit 起始的 POST、PUT、PATCH 或 DELETE 導航，都會隨附您的表單提交資料。這主要用於建立使用 submission.formData FormData 物件的「樂觀使用者介面」。

在 GET 表單提交的情況下，formData 將會是空的，而資料會反映在 navigation.location.search 中。

navigation.json

任何從 useSubmit(payload, { encType: "application/json" }) 起始的 POST、PUT、PATCH 或 DELETE 導航，其 JSON 值都會出現在 navigation.json 中。

navigation.text

任何從 useSubmit(payload, { encType: "text/plain" }) 起始的 POST、PUT、PATCH 或 DELETE 導航，其文字值都會出現在 navigation.text 中。

navigation.location

它會告訴您下一個 location 將會是什麼。

請注意，如果正在提交表單到連結所指向的 URL，這個連結不會顯示為「處理中」，因為我們只會針對「載入中」狀態這麼做。當狀態為「提交中」時，表單將會包含處理中的使用者介面，一旦動作完成，連結就會顯示為處理中。

navigation.formAction

任何從 <Form> 或 useSubmit 起始的 POST、PUT、PATCH 或 DELETE 導航，其表單提交動作路由路徑值都會出現在 navigation.formAction 中。

在 GET 表單提交的情況下，navigation.formAction 將會是空的

如果您在 example.com/id 提交表單，則 navigation.formAction 將會是「/id」

navigation.formMethod

任何從 <Form> 或 useSubmit 起始的 POST、PUT、PATCH 或 DELETE 導航，其表單提交方法值都會出現在 navigation.formMethod 中。

在 GET 表單提交的情況下，navigation.formMethod 將會是空的

以下是一個範例。請注意 navigation.formMethod 為小寫

function SubmitButton() {
  const navigation = useNavigation();
  if (navigation.formMethod) {
    console.log(navigation.formMethod); // post
  }

  return (
    <Form method="POST">
      <button>Submit</button>
    </Form>
  );
}

navigation.formEncType

任何從 <Form> 或 useSubmit 起始的 POST、PUT、PATCH 或 DELETE 導航，其表單提交方法值都會出現在 navigation.formEncType 中。

此屬性可能是以下四個值之一：「text/plain」、「application/json」、「multipart/form-data」、或「application/x-www-form-urlencoded」。

對於 GET 表單提交，navigation.formEncType 將為空