Redirect + reloadDocument

[Mange]

I have an app that mixes a Remix app and another server-side app on the same URL namespace[1]. This works in most cases, as long as I remember to add reloadDocument on each <Link> (or use <a>) and <Form>.

However, one case that broke when I tried upgrading from Remix 1.9 to 1.11 was a <Form reloadDocument> that responds with a redirect. Previously this was no problem as the browser would do a full navigation there, but since this update Remix will keep doing a client-side navigation when this happens.

I think it would be great if we could emit another header, like the x-remix-redirect header used for redirections, that indicate that no client-side navigation should take place. The current logic just assumes that all paths on the same origin would be handled by Remix and all paths on some other origin should be using a real redirect.

export function action() {
  return redirect("/some-path", {reloadDocument: true});
  // or maybe
  // return redirect("/some-path", {forceReload: true});
}

In the meantime, what sort of workaround can I do? I'm thinking of making the action actually render an empty page that just redirects on page load. That doesn't work if JS is disabled, though…

---

[1]: Converting a Rails app into a Remix app. This needs to happen slowly, page-by-page, but it's not unlikely that someone would mount a Remix app under /admin and some other app under the root.

[brophdawg11]

I think this is partially a dup of remix-run/react-router#9859, so let's keep using that one for the ability to specify same-domain hard redirects.

As for <Form reloadDocument> not respecting document redirects, that sounds like a potential bug. Would you be able to create a small reproduction of the case that worked on 1.9 and fails on 1.11 and open a separate issue for that so we can look into it? You can assign the issue to me so it'll get on my radar. Thanks!

[Mange]

Thanks! I'll subscribe to the other issue.

I'll look into making a reproduction and open an issue with it.

[Mange]

I'm unable to reproduce the problem where it works on 1.9 and breaks on 1.11, but I've managed to get a working case that fails on both.

The reason why I know it broke for me in the upgrade was that I had E2E tests that caught this change in behavior, and it broke on the commit where Remix was bumped.

What I didn't realize at the time was that it wasn't a <Form>, but a <ValidatedForm> from remix-validated-form. That form uses useSubmit under the hood, and useSubmit does not respect reloadDocument in either version (most likely because reloadDocument only exists inside of React and useSubmit acts on underlying <form> elements).

So right now I'm more confused on why it would work before at all. It must be some other interaction in my more complicated app that caused it to work; maybe it never worked but I had a false positive in the tests. I'm not sure.

In either case, I submitted an issue to remix-validated-form for them to have a look at it: airjp73/rvf#241. Maybe an issue on react-router would've been more appropriate, maybe not.

I'll deal with it locally for now and crossing my fingers for support for hard redirects in remix-run/react-router#9859. 🙂

[brophdawg11]

Ah, yeah <FormReload reloadDocument> is basically saying "don't preventDefault this form and do a client side submission via useSubmit" so the flag doesn't make sense when you manually call useSubmit since you could just opt out of it manually.

[brophdawg11]

Closing this as a duplicate of remix-run/react-router#9859. Should be available in remix v2 via remix-run/react-router#10705 and #7040.