使用反應路由器

我試圖做一個react-router應用程序，使用ReactCSSTransitionGroup動畫頁面過渡動態改變路線的動畫，但我無法弄清楚如何動態地設置transitionName這樣我就可以使用不同的路線上不同的動畫我正在嘗試去。例如，我希望根路由在彼此之間淡入淡出，但兒童路由應該滑入/滑出 - 也就是說，我希望它像本機應用一樣工作。使用反應路由器

當使用代碼：

<ReactCSSTransitionGroup 
     transitionName={transitionValue} 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={500} 
    > 
    ... 
    </ReactCSSTransitionGroup>

我怎樣才能讓transitionValue的東西，可以通過一個Link組件來設置或基於加載的路線？我不確定最好的方式來做到這一點。

感謝您的幫助！

來源

2016-10-21 brian h

我不知道這是否是最好的選擇，但我加query的鏈接，然後通過this.props.location.query.tran

<ReactCSSTransitionGroup 
    transitionName={this.props.location.query.tran || 'fade'} 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500} 
> 
... 
</ReactCSSTransitionGroup>

訪問它，鏈接如下：

<Link to={{ pathname: '/role/1', query: { tran: 'coverLeft' }}}/>

希望這有助於某人。或者，如果有人有更好的方法，我很樂意聽到它，因爲我不喜歡我的解決方案弄髒URL的一點。

來源

2016-10-26 14:13:49

使用反應路由器

回答

相關問題