网上搜了很多文章但都是 基于3.0的 但react-rouer 4.0 改动了 所以以前的到现在不适用了 大概的使用react-addons-css-transition-group 的思路我倒是了解了 但是加上路由就很懵逼 自己倒腾一天了写了一些也没有实现

  <Router>
        <div>
            <div>
                <Link to='/page1' > page1 </Link>
                <Link to='/page2' > page2 </Link>
            </div>
            <Layout>
                <Switch>
                    <Route path='/page1' component={Page1} />
                    <Route path='/page2' component={Page2} />
                </Switch>
            </Layout>
        </div>
    </Router>
    
    这是设置的路由的地方
    
    return (
        <div>
            halo
        <CSSTransitionGroup
            component="div"
            className="react-container"
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
            <div key={this.props.children} >
                {this.props.children}
            </div>
        </CSSTransitionGroup>
        </div>
    )
    这里是Layout组件render 的 return
    
    我初步设想的是，  当路由为/page1 或 /page2 的时候 就会渲染指定的Page1，Page2 组件嘛，   然后Layout组件里边 的this.props.children 就是Page1或Page2 组件嘛
    但是， 无论路由怎么变化，视图能显示正确的当前路由下显示的组件， 但Layout里面的this.props.children 一直都是一个值   而不是当前与路由匹配的Page1 Page2 组件
    请教大家，  react-router 4.0 大家都是怎么做动画跳转的