动画路由实现几点疑问

#1

“react-router-dom”: “^4.3.1”,
“react-transition-group”: “^2.4.0”

import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

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


import  Page1 from './pages/page1';
import Page2 from './pages/page2';
import Page3 from './pages/page3';

import './style/animation.css';


export default class AppRouter extends React.Component {
    render() {
        return (
            <Router >

                <Route render={({ location }) => {
                    console.log(location)
                    return (
                        <TransitionGroup>
                            <CSSTransition key={location.pathname} classNames='right' timeout={500}>
                                <Switch>
                                    <Route exact path='/' component={Page1} />
                                    <Route path='/page2' component={Page2} />
                                    <Route path='/page3' component={Page3} />
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    )
                }} />

            </Router>
        )
    }
}

存在疑问：
1.为什么动画部分必须在子路由内部，不放在里面 动画不生效
2.从page1跳转到page2，为什么这个被CSSTransition包含的元素 enter和exit同时出现

3.打印了组件的生命周期函数，componentWillMount 再切换页面时会进入多次