Stay at the same URL when submitting a Form

[tavoyne]

Say I'm at URL /sales/invoices/102000.

There's a Form inside of /sales and I don't want the URL to change when it is submitted. By default, I'm redirected to /sales (because that's the value of request.url).

I added a hidden input:

<input name="redirectTo" type="hidden" value={useLocation().pathname} />

In order to return the proper Response from the action function:

export const action: ActionFunction = async ({ request }) => {
  // ...
  return redirect((await request.formData()).get("redirectTo"));
};

Is there a better way? Seems a lot of stuff just to say "don't do anything".

Plus, I noticed that the URL does change for a fraction of a second (/sales/invoices/102000 —> /sales —> /sales/invoices/102000), which is annoying. EDIT This doesn't happen with fetcher.Form.

[nonameolsson]

Could this be of help? https://remix.run/docs/en/v1.5.1/api/remix#usesubmit

[tavoyne]

I observe the exact same behaviour using useSubmit. Why do you think it would make any difference?

[sergiodxa]

There are at least three patterns I found for this.

1. Infer the URL from the action request.url and route params
2. Pass the URL as an hidden input in the form (what you did)
3. Use the Referer HTTP header (not referrer, referer, it's a typo on the spec)

I think the third is the simplest, but because the browser may not send the header if the user configured a higher security or you used noreferer the second is the safest.

---

That said, if you move the action to the route with the Form this will not be an issue anymore, the URL change will also not happen.

And the reason the URL change from /sales/invoices/102000 to /sales to /sales/invoices/102000 is because a Form does a navigation, it navigated the user from the first URL to the second with the method POST, the the action redirected so it wen back to the first URL.

It doesn't happen with fetcher.Form because fetcher doesn't cause a navigation, while Form (and useSubmit) cause a navigation.

[tavoyne]

Thanks a lot for the in-depth explanation.

That said, if you move the action to the route with the Form this will not be an issue anymore, the URL change will also not happen.

What do you mean by that? The action function is already in the route that renders the Form (i.e. /sales).

And the reason the URL changes from /sales/invoices/102000 to /sales to /sales/invoices/102000 is because a Form does a navigation, it navigated the user from the first URL to the second with the method POST, the action redirected so it went back to the first URL.

Yes, I noticed that, it happens here:

remix/packages/remix-react/components.tsx

Line 1176 in 973cd68

navigate(url.pathname + url.search, { replace: options.replace });

But frankly, I don't get it. Why doesn't Remix wait for the POST to finish before performing any redirection? That way it'd know where to go (if it has to go somewhere).

[sergiodxa]

What do you mean by that? The action function is already in the route that renders the Form (i.e. /sales).

Is the Form on the parent /sales route? In that case you may want to use fetcher.Form

Why doesn't Remix wait for the POST to finish before performing any redirection? That way it'd know where to go (if it has to go somewhere).

The redirect is returned by the response of the POST request, there's no way for Remix to know where you want to redirect before the POST is completed and returned a response.

[tavoyne]

Is the Form on the parent /sales route? In that case you may want to use fetcher.Form

Yes it is, and using fetcher.Form indeed fixes the behaviour. But why isn't Form behaving just as fetcher.Form in that regard? I don't see it explained in the docs, though it seems a big difference to me.

The redirect is returned by the response of the POST request, there's no way for Remix to know where you want to redirect before the POST is completed and returned a response.

That's exactly what I mean. So why is Remix navigating before receiving the response to the POST request? In my particular example, if it waited a little, it would notice that there's no need for going to /sales and would just stay at /sales/invoices/102000 as we expect it to.

⚠️ EDIT

As a matter of fact, it is well explained in the API docs. I missed it. Sorry about that. And thank you @sergiodxa for your precious help.