Search code examples
reactjsreact-routerreduxreact-router-reduxreactcsstransitiongroup

how to update a route in React Router without re-mounting the component in a single page app?


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.


Solution

  • 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 :(