How to use with react-router? about react-inline-transition-group HOT 10 CLOSED

import React from 'react'
import Transition from 'react-inline-transition-group'
import { render } from 'react-dom'
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'

import withExampleBasename from '../withExampleBasename'

const styles = {
  Image: {
    position: 'absolute',
    height: '400px',
    width: '400px'
  },

  base: {
    opacity: 0,
    transition: 'all 1000ms'
  },

  appear: {
    opacity: 1
  },

  leave: {
    opacity: 0
  }
}

const App = ({ children, location }) => (
  <div>
    <ul>
      <li><Link to="/page1">Page 1</Link></li>
      <li><Link to="/page2">Page 2</Link></li>
    </ul>

    <Transition
      component="div"
      childrenStyles={{
        base: styles.base,
        appear: styles.appear,
        enter: styles.appear,
        leave: styles.leave
      }}
    >
      {React.cloneElement(children, {
        key: location.pathname
      })}
    </Transition>
  </div>
)

const Index = (props) => (
  <div style={Object.assign({}, styles.Image, props.style)}>
    <h1>Index</h1>
    <p>Animations with React Router are not different than any other animation.</p>
  </div>
)

const Page1 = (props) => (
  <div style={Object.assign({}, styles.Image, props.style)}>
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
)

const Page2 = (props) => (
  <div style={Object.assign({}, styles.Image, props.style)}>
    <h1>Page 2</h1>
    <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
)

render((
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('example'))