react路由过渡动画效果

render() {

    return (

      <div>

        <li><Link to="/home">Home</Link></li>

        <li><Link to="/child">Child</Link></li>

        <TransitionGroup>

          <CSSTransition

            timeout={1000}

            classNames='fade'

            unmountOnExit

            key={this.props.location.key}

          >

            <Switch location={this.props.location}>

              <Route path="/home" component={Home} />

              <Route path="/child" component={Child} />

            </Switch>

          </CSSTransition>

        </TransitionGroup>

      </div>

  )

  }

 

说明：

key:此属性是配合TransitionGroup组件来使用的，在列表组件中可以通过此key值来判断列表中的子节点需要被插入还是移除，然后触发动画。

location:此属性是路由切换动画的关键(不是必须)，Switch下的子组件(Route)会根据当前浏览器的location作为匹配依据来进行路由匹配。但是如果Switch组件定义了location属性，其中的子组件就会以定义的location作为匹配依