React中路由切换动画

import React from 'react'
import { Switch, Route, withRouter, Link, Redirect } from 'react-router-dom'
import './App.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import Login from './components/Login'
import Wish from './components/Wish'
class App extends React.Component {
    state = {
        animate: "animateLeft"
    }
    componentWillReceiveProps(nextProps) {
        let to = nextProps.location.pathname
        let from = this.props.location.pathname
        console.log(to, from)
        if (to == "/" && from == "/wish" || to == "/wish" && from == "/") {
            // 加右动画
            this.state.animate = "animateRight"
        } else {
            // 加左动画
            this.state.animate = "animateLeft"
        }
    }
    shouldComponentUpdate(nextProps) {
        let to = nextProps.location.pathname
        let from = this.props.location.pathname
        if (to == from) {
            return false
        } else {
            return true
        }
    }
    render() {
        return (
            <div className="App">
                <TransitionGroup>
                    <CSSTransition timeout={2000} classNames={this.state.animate} unmountOnExit key={this.props.location.pathname}>
                        <Switch location={this.props.location}>
                            <Route exact path="/" component={Login} />
                            <Route path="/wish" component={Wish} />
                            <Redirect to="/"></Redirect>
                        </Switch>
                    </CSSTransition>
                </TransitionGroup>
            </div>
        );
    }
}
export default withRouter(App);