使用react-transition-group完成路由动画的切换

首先我们的原始路由文件应该是这样的

const AppRouter = () => {
  const { isLogin } = user();
  const handleRouter = () => {
    return isLogin() ? <Redirect to="/home" /> : <Redirect to="/login" />;
  }
  return (
    <BrowserRouter>
      <Provider store={store}>
        <Switch>
          <Route exact path='/' component={handleRouter}/>
          <Route exact path='/login'  component={Login} />
          <Route path='/home' component={Home}/>
          <Route exact path='/testLogin' component={TestLogin} />
          <Route exact path='/testuser' component={TestUser}/>
          <Route component={Error} />
        </Switch>
      </Provider>
    </BrowserRouter>
  )
};

而动画是针对路由，也就是说路由（页面）切换的时候，所以需要对这些Router进行包装，代码如下

import React from 'react';
import { TransitionGroup, CSSTransition} from 'react-transition-group';
import { Route, Switch } from 'react-router-dom';
import '../pages/test/login/router.css';

const AnimatedSwitch = props => {
  const { children } = props
  return (
    <Route
      render={({ location }) => (
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames={props.type || 'fade'} 
            timeout={props.duration || 1000}
          >
            <Switch location={location}>{children}</Switch>
          </CSSTransition>
        </TransitionGroup>
      )}
    />
  )
}

export default AnimatedSwitch

解释一下：因为切换路由的时候其实是Switch进行路由的切换，所以我们吧Switch这一部分抽离出来进行动画效果的封装，因为有很多个Route，所以我们使用TransitionGroup，然后使用CSSTransition进行动画效果的封装。
最后修改一下路由文件，如下

return (
    <BrowserRouter>
      <Provider store={store}>
        <AnimatedSwitch>
          <Route exact path='/' component={handleRouter}/>
          <Route exact path='/login'  component={Login} />
          <Route path='/home' component={Home}/>
          <Route exact path='/testLogin' component={TestLogin} />
          <Route exact path='/testuser' component={TestUser}/>
          <Route component={Error} />
        </AnimatedSwitch>
      </Provider>
    </BrowserRouter>
  )