Transition works on the first time, but Component goes missing on the second time.

[saulojoab]

When I click a button to go to the next page, the transition works just fine. But when I click to go to another page, it transitions but when the transition is finished the page goes blank.

Here's how I'm using it:

ReactDOM.render(
    <Router>
        <AnimatedSwitch
            atEnter={fadeTransition.atEnter}
            atLeave={fadeTransition.atLeave}
            atActive={fadeTransition.atActive}
            mapStyles={fadeTransition.mapStyles}
            className="transitionContainer"
        >
            <Route path="/" exact={true} component={Login} />
            <Route path="/confirmation" component={Confirmation} />
            <Route path="/admin" exact={true} component={Admin} />
            <Route path="/home" component={Home} />
        </AnimatedSwitch>
    </Router>
, document.getElementById('root'));

It works just fine on the first transition, but the transitionContainer div goes missing after the second one: This is what happens to the HTML code when the transition is finished: As you can see, the transitionContainer div isn't there anymore.

I have no clue what's causing this. I don't think I did anything wrong, the page loads just fine but then goes missing when the transition ends. Any clues on how to fix it?

[saulojoab]

Apparently this is an issue with React Router, so I'm closing this.

[saulojoab]

Fixed it by not using useEffect() as async on any component, in case anyone wanna know.

useEffect(() => {

}, []);