useFormAction

Type declaration

declare function useFormAction(
  action?: string,
  { relative }: { relative?: RelativeRoutingType } = {}
): string;

This hook is used internally in <Form> to automatically resolve default and relative actions to the current route in context. While uncommon, you can use it directly to do things like compute the correct action for a <button formAction> to change the action of the button's <Form>. (Yes, HTML buttons can change the action of their form!)

import { useFormAction } from "react-router-dom";

function DeleteButton() {
  return (
    <button
      formAction={useFormAction("destroy")}
      formMethod="post"
    >
      Delete
    </button>
  );
}

It's also useful for automatically resolving the action for submit and fetcher.submit.

let submit = useSubmit();
let action = useFormAction();
submit(formData, { action });