Use multiple actions on same route

[JakovGlavac]

Hi, I'm trying to use multiple actions on same route. I've put action in other file, but for some reason I get an error

Folder structure:

route/
├─ test/
│  ├─ firstFile.tsx
│  ├─ secondFile.tsx

firstFile.tsx

<Form action="/test/secondFile" method="post">
<Button type="submit">Klik</Button>
</Form>

seondFile.tsx

export let action: ActionFunction = async ({ request }) =>{
await someDBStuff();
return null;
}

Then after pressing a button I get this error:

[sergiodxa]

An action needs to return one of two things.

1. A redirect to another URL
2. Data (or a response with data) to be accessed through useActionData

The redirect works all the time, the data to be accessed through useActionData will only work if the action is on a route with a component.

So in your case because you moved the action to another file you need to do a redirect, in case of an error you should store any error message in the session with session.flash, redirect to the previous URL (you can use redirectBack from Remix Utils) and then in the loader read the errors from the session with session.get and return them as part of the loader data.

If you want to keep using useActionData you need to move the action function back to the same route of the form.

The reason why useActionData doesn't work with an action in a different route is because a form submit is causing a navigation, so you are going from GET /test/firstFile to POST /test/secondFile, when you return data instead of a redirect the user is still in the second URL with the method POST, so that route needs to have a UI to show.

[JakovGlavac]

I also figured out that you can use just switch case.