useNavigation

This hook is simply a re-export of React Router useNavigation.

  1. import { useNavigation } from "@remix-run/react";
  3. function SomeComponent() {
  4.   const navigation = useNavigation();
  5.   navigation.state; // "idle" | "submitting" | "loading"
  6.   navigation.location; // Location being navigated to
  7.   navigation.formData; // formData being submitted
  8.   navigation.formAction; // url being submitted to
  9.   navigation.formMethod; // "GET" | "POST" | "PATCH" | "PUT" | "DELETE"
  10. }

The useNavigation().formMethod field is lowercase without the future.v2_normalizeFormMethod Future Flag. This is being normalized to uppercase to align with the fetch() behavior in v2, so please upgrade your Remix v1 applications to adopt the uppercase HTTP methods.

For more information and usage, please refer to the React Router useNavigation docs.