useFormAction

Framework Data

Summary

Resolves the URL to the closest route in the component hierarchy instead of the current URL of the app.

This is used internally by Form to resolve the action to the closest route, but can be used generically as well.

import { useFormAction } from "react-router";

function SomeComponent() {
  // closest route URL
  let action = useFormAction();

  // closest route URL + "destroy"
  let destroyAction = useFormAction("destroy");
}

Info

This hook adds a basename if your app specifies one, so that it can be used with raw <form> elements in a progressively enhanced way. If you are using this to provide an action to <Form> or fetcher.submit, you will need to remove the basename since both of those will prepend it internally.

Signature

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

Params

action

The action to append to the closest route URL. Defaults to the closest route URL.

options.relative

The relative routing type to use when resolving the action. Defaults to "route".

Returns

The resolved action URL.