Form component example
This example shows a Form component that submits to an action at /projects/123: `<Form action="/projects/123" method="post"><input type="text" name="title" /><button type="submit">Submit</button></Form>`
React Router · Getting started · all subjects
actions/calling
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Calling actions with useSubmit hook
You can submit form data to an action imperatively using the `useSubmit` hook. Call `submit(data, { action: path, method: "post" })` to submit. Like Form, this causes a navigation and adds a new browser history entry.
useSubmit example
This example shows useSubmit in a quiz timer: `let submit = useSubmit(); let cb = useCallback(() => { submit({ quizTimedOut: true }, { action: "/end-quiz", method: "post" }); }, []);`
Calling actions with fetcher
Fetchers allow you to submit data to actions without causing a navigation and without adding new entries to the browser history. Use `fetcher.Form` or `fetcher.submit()` to call actions with a fetcher.
fetcher.Form example
This example shows a fetcher Form: `let fetcher = useFetcher(); <fetcher.Form method="post" action="/update-task/123"><input type="text" name="title" /><button type="submit">{busy ? "Saving..." : "Save"}</button></fetcher.Form>`
fetcher.submit example
Fetchers also have an imperative submit method: `fetcher.submit({ title: "New Title" }, { action: "/update-task/123", method: "post" });`
fetcher.state property
A fetcher has a `state` property that indicates its current state. The value "idle" means the fetcher is not busy. You can check `fetcher.state !== "idle"` to determine if a submission is in progress.
Form component for declarative action calling
Actions are called declaratively by using the Form component from react-router with an action prop specifying the route path and method prop set to 'post'. This causes a navigation and adds a new entry to browser history. Example: <Form action='/projects/123' method='post'><input type='text' name='title' /><button type='submit'>Submit</button></Form>
useSubmit hook for imperative action calling
The useSubmit hook from react-router allows imperatively submitting form data to an action. It takes two arguments: the data object and an options object with 'action' and 'method' properties. This causes a navigation and adds a new entry to browser history. Example: submit({ quizTimedOut: true }, { action: '/end-quiz', method: 'post' })
Fetcher for non-navigating action calls
Fetchers allow submitting data to actions without causing a navigation and without adding entries to browser history. Fetchers are accessed via the useFetcher hook and provide both declarative Form and imperative submit methods. The fetcher.state property indicates if a submission is in progress ('idle' means not busy).
Fetcher Form and submit examples
Fetchers provide a Form property for declarative submissions: <fetcher.Form method='post' action='/update-task/123'><input type='text' name='title' /><button type='submit'>Save</button></fetcher.Form>. They also provide imperative submit: fetcher.submit({ title: 'New Title' }, { action: '/update-task/123', method: 'post' })
useNavigation hook for pending UI
Use `useNavigation()` from react-router to access the current navigation state: 'idle', 'loading', or 'submitting'. Returns an object with `state` and `location` properties. Use `navigation.state === 'loading'` to show loading indicators. `navigation.location` is populated with the next location while data loads, undefined when idle.
useNavigate hook for programmatic navigation
Use `useNavigate()` from react-router to get a navigate function for programmatic navigation. Example: `const navigate = useNavigate()` then `navigate(-1)` to go back one entry in browser history, or `navigate('/path')` to navigate to a URL.
useSubmit hook for programmatic form submission
Use `useSubmit()` from react-router to get a submit function for programmatic form submission. Example: `const submit = useSubmit()` then `submit(formElement)` to submit a form programmatically. Useful for triggering submissions on onChange events instead of waiting for user click.
useSubmit replace option for history management
Pass `{ replace: true }` as second argument to submit: `submit(event.currentTarget, { replace: true })` to replace the current history entry instead of pushing a new one. Useful for search forms submitted on every keystroke to prevent large history stacks.
useFetcher for forms without navigation
Use `useFetcher()` from react-router to submit forms without causing navigation. Returns a fetcher object with a Form component. Example: `const fetcher = useFetcher(); <fetcher.Form method='post'>`. Useful for actions that update data on the current page without changing URL or history. Data is still automatically revalidated after the action completes.