reactjs - React Transition Group v2 与 React Router v4

Question

嘿，每个人都试图让这个工作好几个小时。我正在尝试在路线更改时进行基本的淡入/淡出。我正在使用反应路由器 v4 和反应过渡组 v2。

我在这里阅读了大量其他问题，我可以让淡入淡出工作，但是当我点击新页面时，旧页面会立即消失而不是淡出。这是我的工作：

index.js：

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { BrowserRouter } from 'react-router-dom'
    import App from './components/app'


    ReactDOM.render(
        <BrowserRouter>
            <App />
        </BrowserRouter>,
        document.querySelector('#container')
    )

应用程序.js：

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import PageTop from './page-top'
    import { Route, Switch, withRouter } from 'react-router-dom'
    import { TransitionGroup, CSSTransition } from 'react-transition-group'

    import Header from './header'
    import Home from './home/home'
    import Work from './work/work'
    import Services from './services/services'
    import About from './about/about'
    import StartAProject from './start-a-project/start-a-project'

    class App extends Component {
        static propTypes = {
            location: PropTypes.object.isRequired
        }

        constructor(props) {
            super(props)

            this.state = {
                nav: false
            }
        }

        toggleNav() {
            this.setState({
                nav: !this.state.nav
            })
        }

        offNav() {
            if (this.state.nav) {
                this.setState({
                    nav: false
                })
            }
        }

        render() {
            const navActiveClass = this.state.nav ? 'nav-active' : ''
            const { location } = this.props

            return (
                <div className={`app ${navActiveClass}`}>
                    <Header nav={this.state.nav} offNav={this.offNav.bind(this)} toggleNav={this.toggleNav.bind(this)} />

                    <TransitionGroup>
                        <CSSTransition
                            key={location.key}
                            classNames="fade"
                            timeout={{ enter: 500, exit: 500 }}
                            mountOnEnter={true}
                            unmountOnExit={true}
                        >
                            <div>
                                <Switch location={location}>
                                    <Route exact path="/" component={Home} />
                                    <Route path="/work" component={Work} />
                                    <Route path="/services" component={Services} />
                                    <Route path="/about" component={About} />
                                    <Route path="/start-a-project" component={StartAProject} />
                                </Switch>
                            </div>
                        </CSSTransition>
                    </TransitionGroup>
                </div>
            )
        }
    }

    export default withRouter(App)

home.js（所有页面都是这样的）：

    import React, { Component } from 'react'
    import PageTop from '../page-top'

    export default class Home extends Component {
        render() {
            return (
                <div className="home-page">
                    <PageTop>
                        <div className="content">
                            <h2>Home</h2>
                        </div>
                    </PageTop>
                    <div>home page test</div>
                </div>
            )
        }
    }

样式.css：

    .fade-enter {
        opacity: 0;
        transition: 0.5s opacity;
    }

    .fade-enter-active {
        opacity: 1;
    }

    .fade-exit {
        opacity: 1;
        transition: 0.5s opacity;
    }

    .fade-exit-active {
        opacity: 0;
    }

header.js

    import React, { Component } from 'react'
    import { Link } from 'react-router-dom'

    export default class Header extends Component {
        constructor(props) {
            super(props)

            this.state = {
                nav: false
            }
        }

        render() {
            return (
                <header className="header padding clear">
                    <h1 className="logo">
                        <Link  to="/" onClick={this.props.offNav}>
                            Name
                        </Link>
                    </h1>

                    <a className="hamburger" onClick={this.props.toggleNav}>
                        <span className="hamburger-bar"></span>
                        <span className="hamburger-bar"></span>
                        <span className="hamburger-bar"></span>
                        <span className="hamburger-bar"></span>
                    </a>

                    <nav className="nav">
                        <ul>
                            <li>
                                <Link to="/work" onClick={this.props.offNav}>Work</Link>
                            </li>
                            <li>
                                <Link onClick={this.props.offNav} to="/services">Services</Link>
                            </li>
                            <li>
                                <Link onClick={this.props.offNav} to="/about">About</Link>
                            </li>
                            <li>
                                <Link onClick={this.props.offNav} to="/start-a-project">Start a Project</Link>
                            </li>
                        </ul>
                    </nav>
                </header>
            )
        }
    }

非常感谢帮助，谢谢！