Replace redirect after a fetcher submit

[mattoni]

I've got a modal that appears when a certain search parameter is populated. The modal has a form that submits some data to an action api route via a fetcher, and that route returns a redirect. Is it possible to make it so that the back button doesn't return the user to the modal in this scenario? Adding a replace prop onto the fetcher.Form didn't seem to work.

Thanks!

[silvenon]

Fetcher doesn't navigate, so I'm a little confused by your question. It's expected that replace wouldn't work, because there was no navigation to begin with. Although I haven't tried myself what happens when you submit via fetcher to an action that returns a redirect.

Would submitting via useSubmit make sense in your situation? In that case you could pass replace: true.

[mattoni]

Fetcher does navigate if the request returns a redirect, so I think there should be a way to handle that/have it respect the place on the form.

[ryanflorence]

Any reason you're using a fetcher instead of <Form> or submit()?

[ryanflorence]

that said, I'm honestly not sure what <fetcher.Form replace> even does with the history stack right now.

[mattoni]

Awesome, I think I was thinking about it too much like the "usual way" with react. Using a regular form achieves the goal here. Thanks so much!

[mattoni]

One followup though, if the form errors out, I get an error Route XXX has no component! Please go add a 'default' export in the route module file. If you were trying to navigate or submit to a resource route, use '<a>' instead of '<Link>' or '<Form reloadDocument>'.

Not sure what to do in this situation? The route specified is the one my form posts to, which doesn't have a component attached to it. It's returning a 422 status with a json body.

[mattoni]

I guess this is what made me lean toward the fetcher - I need to return errors from the post without redirecting....but I want to redirect on success. The fetcher accomplishes this whereas regular forms still redirect to the original route even if the response isn't 2xx.

Is this expected behavior?

[silvenon]

This is exactly why I reached for useFetcher.

<Form action="/api"> always navigates to /api, so I think the reason for the limitation you describe is because otherwise the workflows with and without JavaScript would diverge, i.e. it wouldn't work without JavaScript. However, I'm getting the error you mentioned even regardless of what the action in the /api returns, but that's consistent with the same reason — without JavaScript you would lose the data returned by the action.

<fetcher.Form replace> would be weird because fetcher itself doesn't navigate, only with redirect. Instead of redirect I recommend using useNavigate + replace: true, considering that you're in client-side land anyway.