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
@halindraprakoso Thanks for the info. I think that's slightly different from other ways of making requests in two reasons:
<Form action>
attribute points to a different URL. It's just that it will delete the history that user stayed in the current page (If I understand it correctly; I haven't used it yet)action
attribute points to the current URL, it still has some similarity to "navigates" case: Users are supposed to make one request per page. I added a section to clarify that.I'm not sure how to add that case in the table while keeping the "navigates" principle. Let me know if you have some ideas. Thanks!