Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Form /> does not respect basename (Svelte) #22

Open
unbiased-dev opened this issue Nov 3, 2022 · 4 comments
Open

<Form /> does not respect basename (Svelte) #22

unbiased-dev opened this issue Nov 3, 2022 · 4 comments

Comments

@unbiased-dev
Copy link

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
@unbiased-dev unbiased-dev changed the title <Form /> does not respect basename <Form /> does not respect basename (Svelte) Nov 3, 2022
@brophdawg11
Copy link
Owner

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 remix-run/react-router#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
Copy link
Author

Fixing this bug was trivial following the issue you linked (remix-run/react-router#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
Copy link
Author

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
Copy link
Owner

brophdawg11 commented Nov 10, 2022

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()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants