Submitting forms in parent layout routes tries posting to wrong action.

[MoSattler]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

I have a layout route on
my-parent.$someParam.tsx
which adds a form and a action to handle the form.

inside that route there are three children:

• my-parent._index.tsx
• my-parent.$someParam.my-child.tsx
• my-parent.$someParam.my-child._index.tsx

Now, when I am submitting the form on /my-parent/some-value/my-child, everything works as expected.

But if I am on /my-parent/some-value/my-child?index, and I try submit, I get the following error:

405 Error: Route "routes/my-parent._index.tsx" does not have an action, but you are trying to submit to it. To fix this, please add an action function to the route.

Expected Behavior

Forms should always submit to the action in their route, not some other route

Actual Behavior

For some reason, if i am on the ?index path of some child route, actions of parent layout routes also try to post on their respective index routes

[MoSattler]

As a temporary fix I have done this in my-parent.$someParam.my-child._index.tsx:

export { action } from "#my-parent.$someParam.my-child"

[kiliman]

In Remix, you can only post to a single route.

The URL /my-parent/:somParam/my-child matches both the layout and index routes. By default Remix will always post to the parent layout route. If you want to post to the index route, you need to include ?index. Typically you don't include that in the URL in the address bar, but as the <Form action> prop.

If you are including ?index, then Remix expects there to be an action in the index route. If you always want to submit to the layout route, then don't add the ?index param even when you're in the index route.

https://remix.run/docs/en/main/components/form#index

[brophdawg11]

<Form method="post"> without an action prop submits to the contextual route. If you need a <Form> in a child index route to submit to it's parent action you will need to add an action prop to the Form.

actions of parent layout routes also try to post on their respective index routes

I'm unable to reproduce this. Here's a working example of submitting a parent form from a button in a child index route:

https://stackblitz.com/edit/remix-run-remix-wcmw5v

If I've misunderstood the issue, please feel free to re-open with a reproduction!

[MoSattler]

Hey @brophdawg11 - here is the reproduction repo + corresponding stackblitz.

Screen.Recording.2023-11-14.at.11.48.42.mov

[stevebarakat]

What happens when you rename this file:

parent.child._index.tsx

to this?

parent.child.tsx

[brophdawg11]

Thanks for the reproduction! I'll re-open and try to take a look at the repro repo soon

[MoSattler]

Thanks @brophdawg11 - I also added a small gif to illustrate the issue

[brophdawg11]

Thanks for the reproduction! This looks like it's a bug in useFormAction that shows up after you've submitted to a separate child index action. This is fixed by #11025 and will be available in the next release 👍

[github-actions]

🤖 Hello there,

We just published version 6.19.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.19.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!