`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`

idle - 没有导航挂起。
submitting - 由于使用 POST、PUT、PATCH 或 DELETE 提交表单，正在调用路由操作。
loading - 正在调用下一个路由的加载器以渲染下一页。

正常的导航和 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 对象构建“乐观 UI”。

在 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`

这将告诉您下一个位置将是什么。

请注意，如果表单正在提交到链接指向的 URL，则此链接不会显示为“挂起”，因为我们只对“加载”状态执行此操作。表单将包含状态为“提交”时的挂起 UI，一旦操作完成，链接将变为挂起。

`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 将为空。