`useNavigation`

這個 Hook 提供有關待處理頁面導航的資訊。

import { useNavigation } from "@remix-run/react";

function SomeComponent() {
  const navigation = useNavigation();
  // ...
}

屬性

`navigation.formAction`

如果有的話，這是提交的表單的 action。

// set from either one of these
<Form action="/some/where" />;
submit(formData, { action: "/some/where" });

`navigation.formMethod`

如果有的話，這是提交的表單的 method。

// set from either one of these
<Form method="get" />;
submit(formData, { method: "get" });

`navigation.formData`

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

例如

// This form has the `email` field
<Form method="post" action="/signup">
  <input name="email" />
</Form>;

// So a navigation will have the field's value in `navigation.formData`
// while the navigation is pending.
navigation.formData.get("email");

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

`navigation.location`

這會告訴您下一個位置將會是什麼。

`navigation.state`

idle - 沒有待處理的導航。
submitting - 由於使用 POST、PUT、PATCH 或 DELETE 提交表單，因此正在呼叫路由動作。
loading - 正在呼叫下一個路由的載入器以渲染下一個頁面。

正常的導航和 GET 表單提交會經歷這些狀態

idle → loading → idle

使用 POST、PUT、PATCH 或 DELETE 的表單提交會經歷這些狀態

idle → submitting → loading → idle