componentWillEnter wird nicht mit TransitionGroup aufgerufen

Question

Ich versuche, Seitenübergänge zu meiner App mit Reagieren Router 4 hinzuzufügen. Aus irgendeinem Grund werden die Funktionen componentWillEnter, componentWillLeave nicht aufgerufen. Hat jemand eine Idee warum?

index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import App from './containers/App'; 

render(
    <Router> 
    <App /> 
    </Router>, 
    document.getElementById('root') 
); 

components/App.js:

import React, { Component } from 'react'; 
import { Route, Link } from 'react-router-dom'; 
import TransitionGroup from 'react-transition-group/TransitionGroup'; 
import Home from '../components/home/Home'; 
import Users from '../components/users/Users'; 

const firstChild = (props) => { 
    const childrenArray = React.Children.toArray(props.children); 
    return childrenArray[0] || null; 
}; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <ul className="TopBar"> 
      <Link to="/">Home</Link> 
      <Link to="/users">Users</Link> 
     </ul> 
     <Route 
      exact 
      path="/" 
      children={({ match, ...rest }) => (
      <TransitionGroup component={firstChild}> 
       {match && <Home {...rest} />} 
      </TransitionGroup> 
     )} /> 
     <Route 
      path="/users" 
      children={({ match, ...rest }) => (
      <TransitionGroup component={firstChild}> 
       {match && <Users {...rest} />} 
      </TransitionGroup> 
     )} /> 
     </div> 
    ); 
    } 
} 

export default App; 

components/AnimatedWrapper.js

import React, { Component } from 'react'; 

const AnimatedWrapper = WrappedComponent => class AnimatedWrapper extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     animate: 0 
    }; 
    } 

    componentWillAppear(cb) { 
    console.log('WillAppear'); 

    this.setState({ 
     animate: 1 
    }); 

    cb(); 
    } 

    componentWillEnter(cb) { 
    console.log('WillEnter'); 

    this.setState({ 
     animate: 1 
    }); 

    cb(); 
    } 

    componentWillLeave(cb) { 
    console.log('WillLeave'); 

    this.setState({ 
     animate: 0 
    }); 

    setTimeout(() => cb(), 175); 
    } 

    render() { 
    console.log(this.state.animate); 
    const style = { 
     opacity: `${this.state.animate}`, 
    }; 
    return (
     <div style={style} className="animated-page-wrapper"> 
     <WrappedComponent {...this.props} /> 
     </div> 
    ); 
    } 
}; 

export default AnimatedWrapper; 

components/Home.js

import React, { Component } from 'react'; 
import AnimatedWrapper from '../animated/AnimatedWrapper'; 

class HomeComponent extends Component { 
    render() { 
    return (
     <div className="page"> 
     <h1>Home</h1> 
     <p>Hello from the home page!</p> 
     </div> 
    ); 
    } 
} 

const Home = AnimatedWrapper(HomeComponent); 
export default Home; 

Komponenten/Users.js:

import React, { Component } from 'react'; 
import AnimatedWrapper from '../animated/AnimatedWrapper'; 

class UsersComponent extends Component { 
    render() { 
    return (
     <div className="page"> 
     <h1>Users</h1> 
     <p>Hello from users page!</p> 
     </div> 
    ); 
    } 
} 

const Users = AnimatedWrapper(UsersComponent); 
export default Users; 

Answer 1

EDIT: Ich denke, TransitionGroup auf diese Weise nicht funktionieren kann. Es ist Low-Level-Komponente und es kann nicht den componentWillEnter() Haken innerhalb der <Switch> und <Route> erreichen.

Sie können stattdessen ReactCSSTransitionGroup verwenden.

Oder versuchen, mehr so ​​etwas wie dieses complicaded: https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a