componentDidMount fires twice when using TransitionGroup for animation

Question

I'm currently using react-transition-group in conjunction with react-router-dom to animate route changes and this is working fine.

The only issue I'm having is that when switching routes and I need to send or fetch some data in the componentDidMount life-cycle hook, it get fires twice. I'm fairly sure this is due to the react-transition-group but I was wondering if there is an obvious solution to this issue.

I discovered this as it was inserting an entity in the database twice, which is far from the intended behavior.

Example of transition with logging in componentDidMount

Answer 1

I've found that it is an issue with my Switch component, see this github issue

Basically you need the location prop in your wrapped Switch component.

Answer 2

Here's the snippet from the github issue so you don't have to click through.

Add location to Switch: <Switch location={location}>

<TransitionGroup component="main">
  <CSSTransition
    key={location.pathname}
    timeout={timeout}
    exit={false}
    classNames="fade">
    <Switch location={location}> // <- Here it is!
      <Route exact path="/" component={Home} />
      <Route path="/blog" component={BlogList} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route component={NotFound} />
    </Switch>
  </CSSTransition>
</TransitionGroup>