search

kiliman / remix-flat-routes

Remix package to define routes using the flat-routes convention
MIT License
640 stars 22 forks source link

Fetcher loads from _layout instead of _index route #116

Closed t-animal closed 2 months ago

t-animal commented 2 months ago

In a setup with a projects+/_layout.tsx with a loader-function and a projects+/_index.tsx with a loader function, a fetcher uses the loader from the _layout-file instead of the _index-file.

I could fix the issue by appending ?index to the url:

const loadMore = () => {
    fetcher.load(`${location.pathname}?index&page=${page}`); // without this ?index fetcher loads from the loader located at _layout.tsx
  };

after I stumbled on #14 . I first thought I had overlooked something, but either this is undocumented or a bug. Since the behavior seems to have been fixed in #14 I guess it's a bug.

t-animal commented 2 months ago

This is the affected file in my project: https://github.com/zam-haus/wissenslandkarte/blob/bbc5f586babb76efb6497210ca9ec664ab3b52f8/remix-frontend/app/routes/projects%2B/_index.tsx#L38

kiliman commented 2 months ago

Yes, since the /projects URL matches both the layout and the index route, you must specify which one you prefer by including the ?index query param for the index route.

This is needed because fetcher.load requests data from a specific route, unlike navigations, where Remix will fetch all matching route loaders.

The Remix docs mention the ?index query param, but only in the context of Form posts. They should be updated to also include fetchers.

https://remix.run/docs/en/main/guides/index-query-param

As for #14, it was a bug in Remix with how it handled index routes, but that was from a very old version. The way it works now is correct and by design.