基于react-router4.0 的動畫路由跳轉(zhuǎn)問題

網(wǎng)上搜了很多文章但都是基于3.0的但react-rouer 4.0 改動了所以以前的到現(xiàn)在不適用了大概的使用react-addons-css-transition-group 的思路我倒是了解了但是加上路由就很懵逼自己倒騰一天了寫了一些也沒有實現(xiàn)

  <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>
    
    這是設(shè)置的路由的地方
    
    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
    
    我初步設(shè)想的是，  當路由為/page1 或 /page2 的時候 就會渲染指定的Page1，Page2 組件嘛，   然后Layout組件里邊 的this.props.children 就是Page1或Page2 組件嘛
    但是， 無論路由怎么變化，視圖能顯示正確的當前路由下顯示的組件， 但Layout里面的this.props.children 一直都是一個值   而不是當前與路由匹配的Page1 Page2 組件
    請教大家，  react-router 4.0 大家都是怎么做動畫跳轉(zhuǎn)的

回答

編輯回答

初心

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

然后是我自己寫的

      <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 是一個數(shù)組， 那個數(shù)組里面的兩個值就是 Page1 和Page2 的兩個組件  不管我怎么點擊切換那里面的children 都是那個數(shù)組， 不會改變，  那么key也就不會改變， 在動畫組件里面的key不改變就意味著沒有動畫發(fā)生。  因為他是靠key來識別不同的組件的。   然后是官網(wǎng)的方法。 關(guān)鍵的地方在于那個 getCom的無狀態(tài)組件   通過當前的pathname去 返回相應(yīng)的組件  然后的key也改變了  就有動畫了。   
  
  
    以上是我的理解，  很粗糙，   希望大家指正

2017年6月20日 12:11