基于react-router4.0 的动画路由跳转问题

Question

网上搜了很多文章但都是 基于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 大家都是怎么做动画跳转的
    

Answer 1

首先看文档的例子 https://reacttraining.com/rea...

然后是我自己写的

<div className="App">

      <Router>
          {/*<div>*/}
          {/*<div>*/}
              {/*<NavLink to='/' > one_ </NavLink>*/}
              {/*<Link to='/page2' children='halo'  />*/}
          {/*</div>*/}
        {/*<Route path='/' component={Page1} />*/}
          {/*</div>*/}
         <Route  render={ ({location}) => (
             <div style={{'position': 'absolute', 'top': 0}} >
                 <div>
                     <ul>
                         <li> <Link to='/page1' children='page1' /> </li>
                         <li> <Link to='/page2' children='page2' /> </li>
                     </ul>
                 </div>
             <Route exact={true} to='/' render={ () => (
                 <Redirect to='/page1' />
             ) } />
                 <div style={{'position': 'absolute', 'top': '60px'}} >
                     <CSSTransitionGroup
                         transitionName="example"
                         transitionEnterTimeout={500}
                         transitionLeaveTimeout={500}
                     >
                         <Route
                            location={location}
                            key={location.key}
                            path='/:path'
                            component={getCom}
                         />
                     </CSSTransitionGroup>
                 </div>
             </div>
         ) }  />
      </Router>
  </div>
  
  我之前用的方法不可以， 是因为那个Layout里面接受的this.props.children 是一个数组， 那个数组里面的两个值就是 Page1 和Page2 的两个组件  不管我怎么点击切换那里面的children 都是那个数组， 不会改变，  那么key也就不会改变， 在动画组件里面的key不改变就意味着没有动画发生。  因为他是靠key来识别不同的组件的。   然后是官网的方法。 关键的地方在于那个 getCom的无状态组件   通过当前的pathname去 返回相应的组件  然后的key也改变了  就有动画了。   
  
  
    以上是我的理解，  很粗糙，   希望大家指正