React-router: Animation example is misleading

[alex-sherwin]

Version

4.1.1

Steps to reproduce

1. Navigate to animated transition demo: https://reacttraining.com/react-router/web/example/animated-transitions
2. Open browser dev tools
3. Select colored div component (by default, the red div) using dev tools
4. Rapidly click the 'Red' <NavLink> button
5. Observe that the route component is rendered multiple times simultaneously until the leaving animation transition completes (even though you're already on the same route)

Expected Behavior

I would expect that when I'm already on the red route (/10/90/50), then re-visit the same route via a <Link> or <NavLink>, that simply nothing would happen (which is the case if no CSSTransitionGroup is in play)

Actual Behavior

The red div is actually rendered many times simultaneously, it's just not visually noticeable due to the contrived example chosen for animations. I wasted many hours using this demo as a guide to implement a menu system to fade in/fade out a sub-menu (opacity + height), thinking I was doing something inherently wrong, until I fired up dev tools on the demo site and realized the provided demo exhibits this problem as well.

The problem is that if you keep clicking a <Link> or <NavLink> for the same route, when using a <CSSTransitionGroup><Route/></CSSTransitionGroup> setup, the <Route/> keeps getting rendered multiple times (so in the case of my sub-menu, as quickly as I can click, I'll have duplicate components rendered temporarily until the removed components animations finish)

[Numel2020]

@alex-sherwin I agree it would be nice to see a clear component example on the react router website. I just get the inclination that react router can not perform this feature out of the box.
I was hoping the react team would have provided a simple example, Its been some time since the v4 release so I would have assumed this would have been demonstrated, surprisingly enough I can not find ONE web/video example on the internet that demonstrates how to do this.

[pshrmn]

The reason for this behavior has to do with history and react-transition-group, not React Router. If you were to use location.pathname instead of location.key for the key, the multiple <Route>s for the same location would go away.

<CSSTransitionGroup>
  <Route key={location.pathname} path='/:h/:s/:l' component={HSL} />
</CSSTransitionGroup>

There may be a discussion to be had about whether clicking on a link to the same location should re-use the existing location object. Then, clicking on a link to the same location would have the same key. There are certain considerations that would have to be made in order to do that, and I'm not sure exactly how browsers do this natively, but either way, that would be more appropriate over in the history repo.