get the element that <Outlet/> is rendering
In react router, there was a useOutlet hook which provided the element that the <Outlet/> was rendering at that route level. How can I do it in TanStack Router??
10 Replies
afraid-scarlet•16mo ago
I could be wrong but I don't think we have that. What would you need it for?
curly-silverOP•16mo ago
I was looking into how I can use Tanstack router with framer motion for route transitions. Lots of guides work only with react-router and they use the
useOutlet hook to kind of "copy" the component so on route change it doesn't immediately change the rendered component.
I did manage to get something working but it requires deep copying the whole router context and providing that copy to a RouterContext.Provider so that it keeps rendering the same componentrival-black•3mo ago
@Werdox how did you manage to do this?
curly-silverOP•3mo ago
Ended up switching to React router v7 which has view transition support and it also has a
useOutlet hook which you can use for framer motion.
I believe Tanstack router now also has view transition support. Not sure.extended-salmon•3mo ago
absolutely, we do have view transitions support
rival-black•3mo ago
Thanks for stopping by @Manuel Schiller , i've seen this https://tanstack.com/router/latest/docs/framework/react/examples/view-transitions
However, my goal is to be able to achieve transition using framer motion instead. Any advice?
(I wish to animate elements separatelly on screen). Already using motion in the rest of the project too. Would be feasible?
Currently, i yes can animate initial, but exit animation wont work (like it would in react router).
React TanStack Router View Transitions Example | TanStack Router Docs
An example showing how to implement View Transitions in React using TanStack Router.
extended-salmon•3mo ago
whats necessary for exit animations to work?
or put differently, whats missing in tanstack router for that?
rival-black•3mo ago
I have to dig deeper into that @Manuel Schiller . But apparently seems that on navigation the older router context gets discarded before the animation can complete. (From my testing this is what happens: depending on how fast the transition ocurs, i see exit animation and sometimes not).
I see this is being an ungoing issue (https://github.com/TanStack/router/discussions/823#discussioncomment-8535087)
But since fauxparse did not work for me and being an old issue, don't know if would be the recommended way still.
extended-salmon•3mo ago
would be interesting to know if this is related to react not supporting react transition with external stores
which is what we use right now in router
if this is related, it might get fixed in the future when react 19 supports concurrent stores
rival-black•3mo ago
Yes, anyways... for this exact project I dont have much time to get too much into that, so i simply created a new Link component and executed the transition function before navigating, at the end it works the same! Love so much what you guys have done @Manuel Schiller . I want to get myself some time on the upcoming weeks to see how i can contribute to Tanstack router and start. I will keep this in my backlog.