React-transition-group: Don't re-render component if link is the same component.

[knynkwl]

I would like the animation to not happen if a user clicks a link that they are currently on.

For example, if on the homepage, a user click the logo, currently it re-renders the component adding fade classes.

Shouldn't that be disabled if the user is on that page?

[jquense]

That seems like the behavior you'd want yeah...i'm not sure what we can do about that tho? react-transition-group doesn't have a lot to do with how routing works in your app. It seems like you want to not remount your page when it updates but doesn't change, which would keep the transition from firing (assuming you are doing it on mount)

[cuzox]

I would appreciate this behavior as well. React router already does not re-draw the component, so it's not really a routing thing.

[jquense]

we'd be glad to help, but i'm not sure how it's related to react-transition-group unless someone can provide a working example demostrating the problem.

React router already does not re-draw the component

That may be true, but we don't re-draw unnecessarily either! the transition component doesn't re transition something unless you have it set to appear and you unmount and remount it, or change the value of in

[silvenon]

I'm pretty rusty with React Router and demos would be a huuuge help. ✨

[cuzox]

Alright, it seems it doesn't re-draw the component, but it does re-apply the enter and enter-active classes. (which is what op really pointed out) Anyway, is there a way of disabling this?

[knynkwl]

Here's an example of what is happening.

I took the code from https://reacttraining.com/react-router/web/example/animated-transitions and added a css scale property so you can see the component move in again after clicking a link that has already been rendered.

[jquense]

Ok that is because location.key is different each time the link is clicked, so react sees that as a different component, maybe use location.pathname which would be the same?

[knynkwl]

@jquense Yep, that's it! Thanks for the info!