Handling action route for a (newsletter) form on every page

[TristanKirwan]

Hey guys,

We have a Form to sign up to a newsletter that is located in the footer. This means that this form is available on every page. We are wondering what the cleanest way to handle this is. When the user submits their form, we simply want to post to an action and stay on the current page.

To make sure we don't repeat code, we tried extracting the action to a separate action route (e.g: /actions/newsletter), but when the Form is submitted we navigate to that route and nothing is returned from render, which causes an error.

The form looks like this:
<Form method="POST" action="/actions/newsletter" >

That route would look something like this:
export const action = () => { console.log("hello"); return null; };

The alternative is to have the Form submitting to its current route, but that means every route in the project needs to check for the newsletter action, which we would prefer to avoid.

Any suggestions are welcome! 🙌

[cstrnt]

I think this might help :) :

https://remix.run/docs/en/v1/api/remix#usefetcher
https://www.youtube.com/watch?v=jd_bin5HPrw&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6

[TristanKirwan]

Yes, this is exactly what we needed! Thanks!