ReactCSSTransitionGroup和react-router的正确使用方式？

Question

想要达到的效果是 / /a /b 三个页面切换时有过渡效果，但下面这个代码有问题。求大神指出正确的方式，感激不尽！！！

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect
} from 'react-router-dom'

import '../../static/style/index.css';

const A = ()=>(<div><Link to="/a">A</Link></div>)
const B = ()=>(<div><Link to="/b">B</Link></div>)
const Home = ()=>(<div><Link to="/">首页</Link></div>)

class Wrapper extends Component {
  render() {
    let {location} = this.props;
    return (
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
        >
          <Route location={location} key={location.key} path='/' exact component={Home}/>
          <Route location={location} key={location.key} path='/a' component={A}/>
          <Route location={location} key={location.key} path='/b' component={B}/>            
        </ReactCSSTransitionGroup>
    );
  }
}

const Demo = () => (
  <Router>
    <Route component={Wrapper} />
  </Router>
)

export default Demo

css没有问题，key这块有问题。第一次切换时有效果，后面就没了。。

Answer 1

只能有一个子节点