react-router实战之使用react-transition-group动画过度

 

1.简介

 

react-transition-group默认的动画触发方式为设置in属性为true，此时被包含的组件会被以动画方式渲染

 

2.实例

 

import React from "react";
import {
  TransitionGroup,
  CSSTransition
} from "react-transition-group";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
  useLocation,
  useParams
} from "react-router-dom";

function App() {
  return (
    
      
        
          
        
        
          
        
      
    
  );
}

function AnimationApp() {
  let location = useLocation();

  return (