I'm looking for a way to "cosmetically" update the route in the address bar of a React/Redux/React-Router/React-Router-Redux application, without actually causing the component to remount when the route changes.
I'm using React CSS Transition Groups to animate entering a route. So when the user goes from
/home/
to
/home/profile/bob
,
an animation fires.
However, once on /home/profile/bob
, the user can swipe left/right to get to other profiles -- /home/profile/joe
etc.
I want the URL in the address bar to update when this happens, but currently that causes the profile
component to re-mount, which re-triggers the CSS Transition Group, causing the animation to trigger -- I only want that animation to trigger when going from a non-profile route to a profile route, not when switching between profile routes.
I hope this makes sense. I'm essentially looking for a way to "cosmetically" update the app URL without forcing a re-mounting of the component which manages that route.
If you are using react router, it will mount/unmount when you change the url. That's the normal behaviour. It's the same thing for transitioning between pages, you can only declare and in/out transition without knowing from which url path did you come from :(