Methods not called when callback is called immediatly

[Bram-Zijp]

When you call the callback instantly, componentWillEnter & componentDidEnter methods will not fire.

Edit: I just noticed the events will not fire when the component that exits, exits immediatly without using any transition method.

index.js:158 A will appear index.js:164 A did appear index.js:181 A will leave index.js:187 A did leave index.js:226 B will enter index.js:232 B did enter index.js:238 B will leave index.js:244 B did leave index.js:283 C will enter index.js:289 C did enter index.js:295 C will leave index.js:301 C did leave index.js:352 D will leave index.js:358 D did leave

/**
 * Created by Arnaud on 10/07/2017.
 */
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Link, Route } from 'react-router-dom'

import { TransitionSwitch } from 'react-router-v4-transition'

/**
 * Example App to showcase the use of react-router-v4-transition.
 *
 * It uses gsap to animate the elements, but any other library could be used in place.
 */
class ExampleApp extends React.Component {

    render() {
        return (
            <div className="example-app">
                <nav className="example-app__menu">
                    <Link to="/">Transition A</Link><br />
                    <Link to="/B">Transition B</Link><br />
                    <Link to="/C">Transition C</Link><br />
                    <Link to="/D">Transition D</Link><br />
                    <br />
                </nav>
                <div className="example-app__content">
                    <TransitionSwitch parallel={false}>
                        <Route exact path="/" component={TransitionA} />
                        <Route path="/B" component={TransitionB} />
                        <Route path="/C" component={TransitionC} />
                        <Route path="/D" component={TransitionD} />
                    </TransitionSwitch>
                </div>
            </div>
        )
    }
}

class TransitionA extends React.Component {

    componentWillAppear(cb) {
        console.log('A', 'will appear')
        setTimeout(cb, 1500)
    }

    componentDidAppear() {
        console.log('A', 'did appear')
    }

    componentWillEnter(cb) {
        console.log('A', 'will enter')
        setTimeout(cb, 1500)
    }

    componentDidEnter() {
        console.log('A', 'did enter')
        // do stuff on enter
    }

    componentWillLeave(cb) {
        console.log('A', 'will leave')
        setTimeout(cb, 1500)
    }

    componentDidLeave() {
        console.log('A', 'did leave')
    }

    render() {
        return (
            <div className="example-app__transition">Transition A</div>
        )
    }

}

class TransitionB extends React.Component {

    componentWillAppear(cb) {
        console.log('B', 'will appear')
        setTimeout(cb, 1500)
    }

    componentDidAppear() {
        console.log('B', 'did appear')
    }

    componentWillEnter(cb) {
        console.log('B', 'will enter')
        setTimeout(cb, 1500)
    }

    componentDidEnter() {
        console.log('B', 'did enter')
        // do stuff on enter
    }

    componentWillLeave(cb) {
        console.log('B', 'will leave')
        setTimeout(cb, 1500)
    }

    componentDidLeave() {
        console.log('B', 'did leave')
    }

    render() {
        return (
            <div className="example-app__transition">Transition B</div>
        )
    }
}

class TransitionC extends React.Component {

    componentWillAppear(cb) {
        console.log('C', 'will appear')
        cb()
    }

    componentDidAppear() {
        console.log('C', 'did appear')
    }

    componentWillEnter(cb) {
        console.log('C', 'will enter')
        cb()
    }

    componentDidEnter() {
        console.log('C', 'did enter')
        // do stuff on enter
    }

    componentWillLeave(cb) {
        console.log('C', 'will leave')
        cb()
    }

    componentDidLeave() {
        console.log('C', 'did leave')
    }

    render() {
        return (
            <div className="example-app__transition">Transition C</div>
        )
    }

}

class TransitionD extends React.Component {

    componentWillAppear(cb) {
        console.log('D', 'will appear')
        cb()
    }

    componentDidAppear() {
        console.log('D', 'did appear')
    }

    componentWillEnter(cb) {
        console.log('D', 'will enter')
        cb()
    }

    componentDidEnter() {
        console.log('D', 'did enter')
        // do stuff on enter
    }

    componentWillLeave(cb) {
        console.log('D', 'will leave')
        cb()
    }

    componentDidLeave() {
        console.log('D', 'did leave')
    }

    render() {
        return (
            <div className="example-app__transition">Transition D</div>
        )
    }
}

ReactDOM.render(
    <BrowserRouter>
        <ExampleApp />
    </BrowserRouter>,
    document.getElementById('root')
)