How do we Pass Props to Outlet in TanStack React Router ?

[ishandutta2007]

For react-router-dom lib the way seems to be to use popular useOutletContext

https://reactrouter.com/en/6.4.4/hooks/use-outlet-context#useoutletcontext

But what about TanStack React Router ?

[ewenjo]

It can be achieved by using context hooks, but hopefully there is or will be a simpler solution.

[itshallrun]

Is there any better solution yet, as creating a separate context?
Props would be very handy actually

[ViewableGravy]

Just my two cents. Outlet's are not meant to accept props, they are a portal (not literally) to any potential child component that could render. This means that they cannot know what is going to be rendered or what props that component is going to accept, so it would not make sense to allow them accepting props.

React context is one such way to pass it through as @ewenjo has mentioned, but this is not the only way. If you are expecting some kind of state such as result from an API request higher up, then tanstack query or some global state manager will allow you to access this state without it being a prop.

If you are expecting some state that is derived from API state, then you can consider abstracting the logic to derive the state so that you can perform this derivation in the child route.

If you are expecting actual component state, you will need to consider either passing the state through the context as suggested above or moving it into global state so that it is not local state to the component.

Finally, since any state you would be passing through a page is not really "component" state, it's more page state, consider using search params from tanstack Router. The implementation here is extremely powerful and provides typed state for children of that route, so accessing it is also trivial.

My opinion - If it's truly component state, it probably doesn't need to be passed to the child of the outlet, and if it's page, app or api state then search params, global state managers or tanstack query is the way to go. I'm almost finished converting my companies ~150 route application with 300k lines over to tanstack router and there has not yet been one instance where state has needed to be passed through the outlet rather than using tanstack query / redux (rip legacy code) or a context for not-so-reactive data