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 transitionWrap = (component) => {
  return () => {
    return( 
      <TransitionWrapper transitionName={ component }>
        { React.createElement(component, { key: history.createKey() } ) }
      </TransitionWrapper>
    )
  }
}

var routeHash = [
  { path: "some-page", component: SomePage },
  { path: "some-other-page", component: SomeOtherPage }
]

var routes = 
    (<Route path="/" key={ history.createKey() } component={AppContainer}>
      { 
        routeHash.map( (obj, i) => {
          return( <Route key={ history.createKey() } path={ obj.path } components={{ content: transitionWrap(obj.component) }} /> )
        } )
      }
    </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';
import ReactTransitionGroup from 'react-addons-transition-group';

class TransitionWrapper extends ReactTransitionGroup{
  render() {
    console.log(this.props.children.type.name + ' render');
    return this.props.children;
  }

  componentWillAppear (callback) {
    console.log(this.props.children.type.name + ' willappear');
  }
  componentDidAppear () {
    console.log(this.props.children.type.name + ' didappear');
  }
  componentWillEnter (callback) {
    console.log(this.props.children.type.name + ' willenter');
  }
  componentDidEnter() {
    console.log(this.props.children.type.name + ' didenter');
  }

  componentWillLeave (callback) {
    console.log(this.props.children.type.name + ' willleave');
  }

  componentDidLeave() {
    console.log(this.props.children.type.name + ' didleave');
  }
}

export default TransitionWrapper;