Redux-Simple-Router with ReactTransitionGroup

app-container.jsx

import React from 'react';
import { connect } from 'react-redux';
import SomePage from './some-page';

class AppContainer extends React.Component {
  constructor(props) {
    super(props);
    // This is the first component the container will load in its content.
    this.state = {
      initialContent: <SomePage />
    }

  }

  render() {
    // Get props into the namespace.
    const { header, content } = this.props;
    const { initialContent } = this.state;

    return (
      <div id="app-main" className={this.appClassName}>
        <div className="main-content" id="main-content">
          { content || initialContent }
        </div>
      </div>
    );
  }
}

export default connect()(AppContainer);

app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTransitionGroup from 'react-addons-transition-group'
import TransitionWrapper from './transition-wrapper'

// Page component imports
import AppContainer from './views/app-container';

import SomePage from './views/some-page';
import SomeOtherPage from './views/some-other-page';

import { Provider } from 'react-redux';
import { Router, Route } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { syncReduxAndRouter } from 'redux-simple-router';

// React components for Redux DevTools
import {DevTools, DebugPanel, LogMonitor} from 'redux-devtools/lib/react';

// importing store
import store from './store';

const history = createBrowserHistory();

// Define routes as JSX objects with a path and component(s).
// Plural components arg passes in props containing JSX to root route component.
// There must be a single root route component.

var routes = 
    (<Route path="/" component={AppContainer}>
        <Route path="some-page" components={{content: SomePage}}/>
        <Route path="some-other-page" components={{content: SomeOtherPage}}/>
    </Route>);

// Boilerplate, but the most important line in the router--links browser history
// to redux store.
// Must appear before DOM rendering.
syncReduxAndRouter(history, store);

var key = store.getState().routing.path.replace("/", '');

// Rendering needs a nest of Provider->Router->Route...
// DebugPanel with (redux) DevTools is also included.

var debug = true;

ReactDOM.render(
  <div>
    <Provider store={store}>
      <ReactTransitionGroup>
        <TransitionWrapper component="span" className="transition-group"
          store={store} history={history}>
          <Router history={history}>    
            { routes }
          </Router>
        </TransitionWrapper>
      </ReactTransitionGroup>
    </Provider>
    {debug ? 
      <DebugPanel top right bottom>
      <DevTools store={store} monitor={LogMonitor}/>
      </DebugPanel>
      : null
    }
      
  </div>,
  document.getElementById('app')
);

transition-wrapper.jsx

import React from 'react';

class TransitionWrapper extends React.Component {
  render() {
    console.log(this.props.childClassName + ' render');
    return this.props.children;
  }
  componentWillAppear (callback) {
    console.log(this.props.childClassName + ' willappear');
    callback();
  }
  componentDidAppear () {
    debugger
    console.log(this.props.childClassName + ' didappear');
  }
  componentWillEnter (callback) {
    console.log(this.props.childClassName + ' willenter');
    debugger;
    let el = this.getDOMNode();

    el.classList.add(this.props.prefix + '-enter');
    el.classList.add(this.props.prefix + '-enter-active');

    el.addEventListener('webkitAnimationEnd', () => {
        console.log(this.props.childClassName + ' willappear webkitAnimationEnd');
        callback();
    });
  }
 }

export default TransitionWrapper;