useNavigation

此钩子提供有关待处理页面导航的信息。

¥This hook provides information about a pending page navigation.

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

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

属性

¥Properties

navigation.formAction

已提交表单的操作（如果有）。

¥The action of the form that was submitted, if any.

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

navigation.formMethod

提交的表单的方法（如果有）。

¥The method of the form that was submitted, if any.

// 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"。

¥Any DELETE, PATCH, POST, or PUT navigation that started from a <Form> or useSubmit will have your form's submission data attached to it. This is primarily useful to build "Optimistic UI" with the submission.formData FormData object.

例如：

¥For example:

// 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 中。

¥In the case of a GET form submission, formData will be empty and the data will be reflected in navigation.location.search.

navigation.location

这会告诉你下一个位置是什么。

¥This tells you what the next location is going to be.

navigation.state

• idle — 没有待处理的导航。

  ¥idle — There is no navigation pending.

• 提交中 — 由于使用 POST、PUT、PATCH 或 DELETE 提交表单，正在调用路由操作。

  ¥submitting — A route action is being called due to a form submission using POST, PUT, PATCH, or DELETE

• loading — 正在调用后续路由的加载器来渲染下一页。

  ¥loading — The loaders for the next routes are being called to render the next page

常规导航和 GET 表单提交会经历以下状态转换：

¥Normal navigations and GET form submissions transition through these states:

idle → loading → idle

使用 POST、PUT、PATCH 或 DELETE 提交的表单会经历以下状态转换：

¥Form submissions with POST, PUT, PATCH, or DELETE transition through these states:

idle → submitting → loading → idle