Actions and Flat Layout Routes

[hollandThomas]

Hey,

I'm currently trying out Remix's features. Currently I'm having a hard time with flat layout routes & actions. Given the following routes (e.g. there is no routes/index.tsx, which seems to be working)

routes
├── __app
│   ├── feedback
│   │   ├── index.tsx
│   └── index.tsx
└── __app.tsx

And these files

// __app.tsx
import React from 'react';
import { Link, Outlet } from 'remix';

const AppLayout: React.FC = () => (
  <div>
    <header>
      <h1>Dashboard</h1>
    </header>
    <section>
      <nav>
        <ul>
          <li>
            <Link to="/">Dashboard</Link>
            <Link to="feedback">Give feedback</Link>
          </li>
        </ul>
      </nav>
    </section>
    <main>
      <Outlet />
    </main>
  </div>
);
export default AppLayout;

// __app/feedback/index.tsx
import type { ActionFunction, MetaFunction, RouteHandle } from 'remix';
import React from 'react';
import { redirect } from 'remix';
import { RadioGroupRoot, RadioItem } from '../../../components/RadioGroup';

export const handle: RouteHandle = { hydrate: true };

export const meta: MetaFunction = () => ({
  title: 'Feedback',
});

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  console.log(formData);
  return redirect('/feedback');
};

const Feedback: React.FC = () => {
  const [value, setValue] = React.useState('1');

  React.useEffect(() => {
    console.log(value);
  }, [value]);

  return (
    <div>
      <h1>How happy are you?</h1>

      <form method="post">
        <RadioGroupRoot value={value} onValueChange={setValue}>
          <RadioItem value="1" label="Unhappy" />
          <RadioItem value="2" label="It's okay" />
          <RadioItem value="3" label="Happy" />
        </RadioGroupRoot>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};
export default Feedback;

when clicking the "Submit" button, the action is not called and there's an Application Error:

Error: You made a POST request to http://localhost:3000/feedback? but did not provide an action for route "routes/__app", so there is no way to handle the request.
at Object.callRouteAction (…/node_modules/@remix-run/server-runtime/data.js:30:11)
at renderDocumentRequest (…/node_modules/@remix-run/server-runtime/server.js:216:35)
at requestHandler (…/node_modules/@remix-run/server-runtime/server.js:55:26)
at …/@remix-run/express/server.js:45:28
at …/node_modules/@remix-run/serve/index.js:44:7
at Layer.handle [as handle_request] (…/node_modules/express/lib/router/layer.js:95:5)
at next (…/node_modules/express/lib/router/route.js:137:13)
at next (…/node_modules/express/lib/router/route.js:131:14)
at next (…node_modules/express/lib/router/route.js:131:14)
at next (…/node_modules/express/lib/router/route.js:131:14)

If I modify __app.tsx as follows (which I should not need to do in the first place?), that action is triggered by the form in __app/feedback/index.tsx (which, again, I would not expect to happen in the first place)

// __app.tsx
import React from 'react';
import { Link, Outlet, ActionFunction, redirect } from 'remix';

export const action: ActionFunction = async ({ request }) => {
 const formData = await request.formData();
 console.log(formData);
 return redirect('/feedback');
};

const AppLayout: React.FC = () => (
 <div>
   <header>
     <h1>Dashboard</h1>
   </header>
   <section>
     <nav>
       <ul>
         <li>
           <Link to="/">Dashboard</Link>
           <Link to="feedback">Give Feedback</Link>
         </li>
       </ul>
     </nav>
   </section>
   <main>
     <Outlet />
   </main>
 </div>
);
export default AppLayout;

additionally, there's a server-side error

[1] > error: [plugin: browser-route-module] Actions are not supported in layout routes: routes/__app

which seems to contradict the former error message.

Surely I'm missing somethíng here. Thanks in advance for any pointers! :)

[hollandThomas]

I figured it out. It needs to be routes/feedback.tsx instead of routes/feedback/index.tsx. This may be an opportunity to improve the error messages, if possible — it might be possible to detect such cases and let them point the user in the right direction.

[sergiodxa]

If you used Form instead of form it should have correctly pointed to the correct action.

[sergiodxa]

As a general rule, always use Form, even if you plan to don’t have JS