useNavigation
このコンテンツはまだ日本語訳がありません。
useNavigation
此钩子提供有关待处理页面导航的信息。
import { useNavigation } from "@remix-run/react";
function SomeComponent() { const navigation = useNavigation(); // ...}
特性
navigation.formAction
已提交的表单的操作(如果有)。
// set from either one of these<Form action="/some/where" />;submit(formData, { action: "/some/where" });
navigation.formMethod
提交的表单的方法(如果有)。
// 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