Multiple actions same route, action placement with nested routes, and resource route without export default

[Fghurayri]

Hello friends,

Thank you so much for giving back to the Web and React community by building and sharing Remix!

I have built a trivial application to get a taste of how things work. Everything went super well. 👍 I have a few remarks/questions to confirm whether I'm doing something wrong or these are actually rough edges.

Here's the repo to reproduce the below issues.

How to have multiple action functions for the same route?

I'm sure this has been asked multiple times, but my Google-fu skills aren't helping me this time!

import type { ActionFunction } from "remix"

// what to do?
export const action: ActionFunction = ({ request }) => { }

export default function Profile() {
  return (
    <>
      <form method="post">
        <input name="name" />
        <button type="submit">Save</button>
      </form>

      <form method="post">
        <input name="avatar" />
        <button type="submit">Save</button>
      </form>
    </>
  )
}

How can I have multiple actions but in the same route?

I worked around that by having a dedicated resource route for each action.

Can't understand how to approach nested layouts with the action function

Take this folder structure as an example (the app is an actual route)

./routes
├── app
│   └── index.tsx
├── app.tsx
└──  index.tsx

The /app/index.tsx

export default function App() {
  return (
    <div>
      <form method="post">
        <input name="content" />
        <button type="submit">
          Post
        </button>
      </form>
    </div>
  )
}

Inside the above /app/index.tsx route, I have a form to submit a new post. First, intuitively, I placed the relevant action function there. However, posting the form didn't match this action function. Instead, it was looking for the action function under the /app.tsx route.

I worked around that by adding a resource route called addPost.ts as an action endpoint.

Should a resource route export default something?

As per the resources docs, I don't have to export default something. However, the app won't build until I do that. For example:

import type { ActionFunction } from "remix"
import { logout } from "~/lib/utils/session";

export const action: ActionFunction = ({ request }) => logout(request);

export default function () { }

I can't have a working logout.ts resource route, which is only responsible for destroying the session, until I export default something.

[jangerhofer]

How can I have multiple actions but in the same route?

I worked around that by having a dedicated resource route for each action.

Another solution is to switch on a type field (included in each form) in a single action function.

import type { ActionFunction } from "remix";

enum FormType {
  UpdateName = "UpdateName",
  UpdateAvatar = "UpdateAvatar",
}

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();

  switch (form.get("type") as FormType) {
    case FormType.UpdateAvatar:
      ...
      break;
    case FormType.UpdateName:
      ...
      break;
  }
};

export default function Profile() {
  return (
    <>
      <form method="post">
        <input name="name" />
        <input name="type" type="hidden" value={FormType.UpdateName} />
        <button type="submit">Save</button>
      </form>

      <form method="post">
        <input name="avatar" />
        <input name="type" type="hidden" value={FormType.UpdateAvatar} />
        <button type="submit">Save</button>
      </form>
    </>
  );
}

[slavabelaev]

dasda

[jangerhofer]

Instead, it was looking for the action function under the /app.tsx route.

I believe you are running into the behavior described here.

If you want to post to an index route use ?index in the action:

action url	route action
/accounts?index	routes/accounts/index.js
/accounts	routes/accounts.js

[jangerhofer]

Should a resource route export default something?

As you noted, a resource route definitely does not have to export default anything. It is a bit of a shot in the dark, but without additional knowledge of the specific error(s) blocking page loads when you omitted the default export, I am going to guess that Remix (or really esbuild under the hood) failed to split server code from client code. Specifically, my guess that code in ~/lib/utils/session which should only run on the server is bundled into your client build.

You can prevent this behavior by renaming the source file to include a .server.ts suffix.

Occasionally, the build may have trouble tree-shaking code that should only run on the server. If this happens, you can use the convention of naming a file with the extension .server before the file type, for example db.server.ts. Adding .server to the filename is a hint to the compiler to not worry about this module or its imports when bundling for the browser.

[Fghurayri]

Thank you so much @jangerhofer for your detailed answers to all of my queries! Github should add a feature to allow selecting multiple answers. 😄