CODEWITHSUNDEEP
remix.run
mikedklein
mikedklein

Reputation: 651

ActionLoader function on parent route submitted from child route redirects back to parent route

So I am struggling with something that I am sure has an elegant solution that I am missing. I have a nested route system where the parent /data/streams (green) has a list of items that have action forms on them and where the action loader is located. However, these can be submitted from a child route /data/streams/$streamId (purple). All works fine except if the user is on a child route they are redirected back to the parent. I can kind of solve this with redirect and embedding the current location in the small pause form, but then I can't use useActionData for displaying error notifications when a call fails. enter image description here

Upvotes: 1

Views: 2626

Answers (1)

Kiliman
Kiliman

Reputation: 20312

Remix treats <Form> submissions as navigations (standard browser feature). That is why your child route POST is navigating to the parent route (since that's where you're posting to).

Remix also supports form submissions that are not navigations (standard fetch). To do this, use <fetcher.Form>. NOTE: data returned from the action is available on fetcher.data. Also check fetcher.state and fetcher.submission to handle optimistic UI.

const fetcher = useFetcher()
return <fetcher.Form method="post" action="/data/streams">

https://remix.run/docs/en/v1/api/remix#usefetcher

Upvotes: 1

Related Questions