示例React-router 路由切换动画的实现

因为项目的需求，需要在路由切换的时候，加入一些比较 zb 的视觉效果，所以研究了一下。把这些学习的过程记录下来，以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟，让他们少走些坑。可能我对代码的表述不是很到位，希望大家不要介意。机智的你们一定可以看明白。

1.插件依赖

 

使用的插件是

react-transition-group

。先简单介绍一下动画插件的使用方式。

CSSTransition

这个组件有两个比较主要的属性：

key

和

in

。

in:Boolean

属性其实可以理解为是否显示当前内容节点。

true

则显示，

false

则不显示。

key:String

这个属性是配合

TransitionGroup

组件来使用的。在一般的列表组件中（列如 todolist），可以通过key来判断列表中的子节点需要被插入还是移除，然后触发动画。

2. Switch 组件

这个组件有一个很重要的属性：

location

。同时这个属性也是路由切换动画的关键所在。

Switch

组件的子组件（一般是 

Route

 和 

Redirect

）会根据当前浏览器的

location

作为匹配依据来进行路由匹配。但是如果

Switch

组件定义了

location

属性，其中的子组件就会以定义的

location

作为匹配依据。

3.代码部分

import React, { Component } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { Switch, Route, withRouter } from 'react-router-dom'

@withRouter
class Routes extends Component {
render() {
const location = this.props.location
return (
<TransitionGroup>
<CSSTransition key={location.key} timeout={1000} classNames="fade">
<Switch location={location}>
<Route path="/route-1" component={Route1} />
<Route path="/route-2" component={Route2} />
</Switch>
</CSSTransition>
</TransitionGroup>
)//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
}//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力

export default Routes

4.原理分析

先确定需求：当切换路由的时候，旧的路由内容在一定时间内过渡消失，新的路由内容过渡显示。
在这个需要里面有两个重要的部分：

• 过渡期间，会同时存在两个节点：新节点和旧节点
• 旧节点应该显示旧的路由内容，新的节点应该显示新的路由内容

4.1 同时存在两节点
刚刚提到的

CSSTransition

的

key

属性可以决定该节点是否需要显示。
而

Router

中的

location

属性会在路由发生变化的时候，进行更新，而

location

里面的

key

则可以作为CSSTransition的key。
关于 

history

对象，可以理解为一个数组，当页面的 

location

 发生变化时，或者刷新页面，

history

 就会

push

一个新的历史信息。在这个历史信息里面，有一个

key

属性，用来区分不同的历史记录（跳转新页面或者是刷新页面）
当路由切换的时候，location对象就会改变，新的key会使得页面重新渲染时出现两个

CSSTransition

（新旧节点）。
4.2 新旧节点对应新旧路由内容
如果只是配置

key

属性，会发现旧的节点会去匹配新的路由内容。这是因为

Route

组件默认根据当前location进行匹配。为了让旧节点中的

Route

根据旧的

location

进行匹配，就需要设置

Switch

的

location

属性。
结语

感谢您的观看，如有不足之处，欢迎批评指正。