reactjstanstack-router

Prevent TanStack Router from re-mounting the entire component tree when a route changes


I have some routes like:

/user/$userId/profile/
/user/$userId/history/
/user/$userId/ranking/
...

Which all render the same "Tabs" component that you can use to navigate between these routes, only changing which tab is selected.

This component has an animation when the tab changes from one to another. When I was using ReactRouter, the lib does not re-mount a component that was present in the previous component tree and the animation works perfectly.

However, the TanStack Router probably changes some component key in the process of navigating through routes, remounting the entire component tree from scratch and thus breaking the animation.

Is there a way I can prevent this behavior and reuse the previous component tree from /profile, /history and so on to preserve this animation?


Solution

  • I figured out that it was a bug on TanStack Router where they used the route as the key on a top element. I advised them about it, and then they fixed it for me, and now it behaves as I wanted.