Pass current route object into loader

[welpie21]

What is the new or updated feature that you are suggesting?

In the loader function passing in the current route object. This means the element, path, etc....

Why should this feature be included?

Inside the loader function you cannot retrieve the current route object with a hook. I store additional information in the route object. some are optional and some are required.

In the loader we need to grab something from the route object that is currently not possible..

[brophdawg11]

Could you provide a code-sandbox/stackblitz of your use-case for this? I have a few thoughts on how you might accomplish the end-goal without having to expose the route to the loader but they'll be much easier to evaluate if you can provide a sample setup 👍

[ofirgeller]

Would be nice if the loader api could be expended so you can pass in dependencies like a state store or api client.

loader: async ({store, client, route}) => {
  const entity = await client.get(route.id);
  store.dispatch(entityLoaded(entity));
}

This helps keep the router only deciding when and what is needed, the client is the how (caching and data source) and the store makes it available to consumers.

[brophdawg11]

@ofirgeller We're already looking into the ability to provide additional dependencies to loaders - keep an eye on #9324 👍

[titenis]

Same thing needed for actions, currently there is no way to get current route info (like useLocation) in the action other than passing this data with FormData which is too hacky

[brophdawg11]

Can anyone put together a reproduction of a sample use-case for needing route info such as this in the loader/action? That way we can use that to identify other potential solutions while considering this ask.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!

[ofirgeller]

is it possible to run the loader function in the scope of the parent component so hooks work?

Not sure this is ever done with libraries for react or if even possible, but it would make it easier to move the same code from inside components to loaders or vis versa.

[alicerocheman]

I'm heavily relying on the route id (because our routes are internationalized), and in order to put a maximum of code in the loaders, I need to be able to retrieve the matched route's id in the LoaderArgs.

This feature request should be a priority in my opinion, as the current LoaderArgs are insufficient and force a lot of code to be outside of the loaders, in order to use useMatches and such.

I hope my vote counts :)

Otherwise, react-router v7 is AWESOME! Thank you for your work.