viral saffron
Apologies if this has been addressed already; but, I searched this channel and could not find this topic.
I'm integrating an add to cart button on Hydrogen (which uses Remix). I'd like to include a fetcher.Form that POSTs to an action on another route.
The form submission works as expected with the exception that, on submission, the browser navigates to the action route(/dummy/action) and displays the json in the browser.
My understanding is that, out of the box, fetcher.Form is designed specifically to post data without causing a navigation. However, that is not the behavior I am experiencing.
I have followed several guides and a couple of remix singles and tried a baker's dozen of fetcher.Form implementations and components. I'm pretty sure I'm just missing a tiny detail to prevent navigation; but I haven't been able to determine what it is.
I'm including some code below that is a stripped down version of the code I am using. Any insight, pointers or gotchas would be greatly appreciated.
routes/remixform.tsx
`import { useFetcher, useLoaderData } from '@remix-run/react';
import { json } from '@shopify/remix-oxygen';
export async function loader() {
return json({
stub: 'this is a stub loader in case I needed a loader to stop navigation'
});
};
export default function RemixForm() {
const fetcher = useFetcher();
const {stub} = useLoaderData();
return (
<fetcher.Form method="post" action="/dummy/action">
<input type="text" />
<button type="submit">Submit</button>
</fetcher.Form>
);
}`
routes/dummy.action.tsx
`import {json, type ActionArgs} from '@shopify/remix-oxygen';
export async function action({request, context}: ActionArgs) {
return json({ stub: 'dummy action' });
};`
faint perch
