React re-rendering on transition leave

Question

I have 2 paths:

• /blog
• /blog/:slug

The first path's content shows a list of links to the second path. When clicking on a link, the new page is displayed using a ReactCSSTransitionGroup from my App.js file:

...
const Routes = React.cloneElement(this.props.children, {
      data: data,
      key: path
    });

    return (
      <div id="js-body" className={data.titleColor}>
        <Nav data={ data }/>
        <ReactCSSTransitionGroup
          transitionName={transitionName}
          transitionAppear={true}
          transitionLeave={true}
          transitionAppearTimeout={timeout * 2}
          transitionEnterTimeout={timeout * 2}
          transitionLeaveTimeout={timeout}
          component="div"
          className="animation-container">

          <h2 className="title"><span>{data.pageTitle}</span></h2>
          { Routes }

        </ReactCSSTransitionGroup>
        <Footer data={ data }/>
      </div>
    );

Now on my second path (/blog/:slug) I check the slug and make a call to my store to fetch the data for that post. If no data exists I show a 404 page else I show the posts data.

...

export default class BlogPost extends Component {

  componentWillMount() {
    this._getPageData();
  }

  componentDidMount() {
    const data = this.props.data;
    const pageTitle = (data.page) ? data.page.title : 'Page Not Found';
    document.title = config.site.title + ' | ' + pageTitle;

    // Enable code highlighting
    $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
    });
  }

  _getPageData(){
    AppDispatcher.dispatch({
      action: 'get-page-data',
      page_slug: 'blog',
      post_slug: this.props.params.slug
    });
  }

  render() {
    ...

    if (!post.fields) {
      return(
        <NoMatch />
      );
    }

    ...


    return (...);
  }
}

The problem comes at this stage. When I click the Link element to go back to /blog from a valid /blog/:slug page, before the transition happens, my current post changes to my 404 page and then transitions out to display the /blog page content. I did a couple of tests and these were my findings:

• When clicking the Link element, the BlogPost component never hits the componentWillUnmount lifecycle function
• When clicking the Link element, the BlogPost component tries to re-render itself. However at this point the /blog data has already been requesting, not finding post.fields, hence displaying the 404 page prior to transitioning out.
• When adding an extra condition for the 404 not to show up (say, only show 404 if we know that we don't have a post for sure), I get the following errors:

first:

Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.

followed by:

Uncaught TypeError: Cannot read property 'createdAt' of undefined

Again, these happening because it's attempting to re-render it before transitioning out, but the data of the page being requested has already been fetched, hence being unable to find the 'createdAt' property.

Any idea on why my component is trying to re-render itself on request for a new component?