使用react-router v3和transisReactCSSTransitionGroup进行Animate路由更改

Question

我尝试在路线上留下动画并使用react-router 3和transisReactCSSTransitionGroup进入。 我的代码看起来像这样：

import React, { Component, PropTypes } from 'react'
import { browserHistory, Router } from 'react-router'
import { Provider } from 'react-redux'

    class AppContainer extends Component {
      static propTypes = {
        routes : PropTypes.object.isRequired,
        store  : PropTypes.object.isRequired
      }

      shouldComponentUpdate () {
        return false
      }

      render () {
        const { routes, store } = this.props
        return (
          <Provider store={store}>
            <div style={{ height: '100%' }}>
              <Router history={browserHistory} children={routes} />
            </div>
          </Provider>
        )
      }
    }

    export default AppContainer

路由索引文件：

import CoreLayout from '../layouts/CoreLayout'
import Home from './Home'
import About from './About'
import NewsRoute from './News'


export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Home,
  childRoutes : [
    NewsRoute(store),
    About,
  ]
})

我知道我需要在主组件中使用location.pathname克隆ReactCSSTransitionGroup组件。 类似的东西：

 <ReactCSSTransitionGroup
  transitionName="example"
  transitionAppear={true}
  transitionAppearTimeout={1000}
  transitionLeaveTimeOut={1000}
 >
    {
      React.cloneElement(this.props.children, {
        key: location.pathname}
      )
    }
</ReactCSSTransitionGroup>

问题是我不知道如何使用我当前的设置来实现这一目标。