enhance-remix
enhance-remix copied to clipboard
Actions in `app/routes/index.js` do not work
If I submit a <remix-form> inside of app/routes/index.js where I also have an action defined, I receive the following error.
You're trying to submit to a route that does not have an action. To fix this, please add an `action` function to the route for [/]
It seems to expect the action to be in app/root.js. I’m not sure how this compares with regular Remix or if this is just an issue with this implementation.
app/routes/index.js
/**
* @param {import('enhance-remix').ActionFunctionArgs}
*/
export async function action({ request }) {
const formData = await request.formData();
console.log(formData.get('message'));
}
/**
* @type {import("@enhance/types").EnhanceElemFn}
*/
export default function Index({ html }) {
return html`
<main>
<remix-form action="/" method="POST">
<label>Message <input name="message"></label>
<button>Send</button>
</remix-form>
</main>
`;
}
I wonder if this is related to https://github.com/remix-run/react-router/pull/9486 and might be fixed by updating the @remix-run/router dependency once released. Maybe you could even use npm overrides to test this theory by setting @remix-run/router to 1.0.3-pre.1.
You need to submit to an index route: /?index, otherwise you are submitting to the parent route.