<Form /> does not respect basename (Svelte)

[unbiased-dev]

The feature of <Form method="post"> ... </Form> is that when the action is triggered, the client stays on the page, and after the action finishers the loader is triggered, so you get fresh data for that page.

This works fine if your router base is / but not if it's nested in a subroute.

Link to minimal repro on codesandbox: https://codesandbox.io/s/remix-router-svelte-bug-ilknm4

How to repro:

Happy path (how it works on /)

• Open https://ilknm4.sse.codesandbox.io/
• Increment shows server side state of a counter (should be 0), this is fetched via the loader function
• Hit Increment button, this triggers the Form post to the endpoint which increments server counter
• Result is loader is retriggered and newest state is shown, counter becomes 1.

Broken (same doesn't work when nested under /nested)

• Open https://ilknm4.sse.codesandbox.io/nested (this is the exact same configuration except it's under /nested and has basename: "/nested"
• Validate counter is 0 (or 1 if you already did the happy path)
• Hit Increment button
• Action is never triggered (can check network logs to verify no calls to /api/count;
• Result is page is now root and not /nested, form

[brophdawg11]

Thanks! This likely applies to both the Svelte and Vue packages which are based on the react-router-dom implementation - which just had this bug fixed recently 🙂. The change should be effectively the same as https://github.com/remix-run/react-router/pull/9352. I'm super busy these next 2 weeks so I might not be able to get to this right away but happy to accept a PR if you want to give it a shot!

[unbiased-dev]

Fixing this bug was trivial following the issue you linked (https://github.com/remix-run/react-router/pull/9352), but I immediately found another. So I don't think it would be ready for a PR.

Essentially, when I'm in a nested route, say /nested/contacts/:id and submit a form that is inside a parent (new contact from the react-router 6.4 tutorial) I get a warning You're trying to submit to a route that does not have an action. To fix this, please add an 'action' function to the route for [/nested/contacts/vzro3ml].

Any pointers where to look for this handling in the source?

[unbiased-dev]

Actually I've narrowed it down to getFormSubmissionInfo.

When using react-router-dom (same setup but react) the return value is:

hash: ""
host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/react-router-dom"
origin: "http://localhost:3000"
password: ""
pathname: "/react-router-dom"
port: "3000"
protocol: "http:"
search: ""

searchParams: URLSearchParams(0)
username: ""

however the return value from remix-router-sveltes getFormSubmissionInfo is:

hash: ""
host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/remix-router-svelte/contacts/ch60tuu"
origin: "http://localhost:3000"
password: ""
pathname: "/remix-router-svelte/contacts/ch60tuu"
port: "3000"
protocol: "http:"
search: ""

searchParams: URLSearchParams(0)
username: ""

I'll see if I can grok the logic behind how this should be properly handled.

[brophdawg11]

Are you trying to use relative routes by any chance? I don't think the vue/svelte versions support that the way react-router-dom does currently - it's on my list of things to tackle since that logic lives almost entirely in the React/Vue/Svelte layer, not the underlying @remix-run/router

From a debugging standpoint, I would start in router.navigate() and then specifically look at handleAction's call to getTargetMatch - that's where we pick the specific route to look for the action. Note these are in @remix-run/router not this package. So the bug is likely what these packages are passing to router.navigate()