react-router non in attesa di animazione prima di cambiare rotta

Question

A sample jsfiddle is here che dimostra il mio problema.

Ciao e Mondo collegamenti cambiare i percorsi. L'animazione è stata applicata su Hello route quando se ne va. In realtà, la transizione è impostata in modo tale che quando la pagina Hello lascia, chiede al componente figlio <h1> di animare nel proprio componentWillLeave, completando il quale può smontare felicemente. L'ho fatto perché nella mia vera app, quando la pagina Hello lascia, i suoi componenti figli sono tenuti ad animare in diversi modi - quindi non è una singola transizione per l'intera pagina.

Per visualizzare il problema, fare clic su Ciao per caricare la pagina Hello. Quindi fare clic sul collegamento Mondo per la pagina World. Vedrai che la pagina World viene caricata anche mentre lo Hello è in animazione.

Quindi, come posso fare in modo che World attenda il completamento dell'animazione? Un'altra cosa che voglio confermare è se l'approccio che ho impiegato per rendere il componente figlio animato prima che il componente genitore lasci sia corretto o meno.

Per avere un riferimento, io sto usando l'ultimo reagiscono-router in maestro ramo: 1.0b4

Answer 1

OK. Dopo aver superato molti dei documenti più recenti e obsoleti, sono riuscito a risolverlo. Here is the solution

Fondamentalmente, il router di reazione riguarda solo l'animazione del contenitore padre. Ma questo significa che usando ReactTransitionGroup, potremmo collegarci al metodo componentWillLeave nel componente in uscita, dove possiamo manipolare i singoli bambini. Così, cambiando una pagina si animano automaticamente i bambini attraverso il gancio.

Il setTimeout nella soluzione può sembrare un hack, ma questo è tutto quello che sono stato in grado di fare per ora.