Navigates? | declarative? | Makes GET, triggers loader | Makes POST, triggers action | No requests |
---|---|---|---|---|
navigates | declarative | <Link to=""> <Form method="get"> |
<Form method="post"> |
<Link to="#..."> |
navigates | imperative | navigate() setSearchParams() |
submit() |
navigate("#") |
stays | declarative | <fetcher.Form method="get"> |
<fetcher.Form method="post"> |
(doesn't make sense) |
stays | imperative | fetcher.load() |
fetcher.submit() |
(doesn't make sense) |
where
const fetcher = useFetcher();
const navigate = useNavigate();
const submit = useSubmit();
const [searchParams, setSearchParams] = useSearchParams();
- Navigates means:
- Remix navigates to the requested URL
- New history is added so you can go back to the page where you were, after making the request
- Up to one request per page: You assume only one request with "navigates" type can happen at a time
- Stays means:
- Remix doesn't navigate to the requested URL, but stays with the same page
- History is untouched
- Up to one request per fetcher: You assume multiple requests with "stays" type can happen at once on a page
@cliffordfajardo right, I curated from all over the official docs. I also watched all the videos on Remix YouTube channel. Great, please go ahead and share this! 🙌
Because the native
<form>
supports onlyGET
andPOST
, it is recommended to usePOST
with a custom values like_action=DELETE
to switch insideaction
function for any mutations (changing data). I'm sold on the idea and even thought those methods are not supported at all!I only know
<Form method=>
and<fetcher.Form method=>
supports the "non-recommended" methods (which I confirmed just now). I need to double check if there are any other ways.