I don't understand why my componentWillAppear, componentWillEnter and componentWillLeave from my src/AnimatedWrapper never fires? It seems only the componentDidMount of that file fires. How do I get the other lifecycle events to fire? Here's what I tried
Here is my src/App.js
import React, { Component } from 'react';
import { Route, Link } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import Home from './Home';
import About from './About';
const firstChild = props => {
const childrenArray = React.Children.toArray(props.children);
return childrenArray[0] || null;
};
export default class App extends Component
{
render() {
return (
<div>
<Link to={"/"}>Home</Link>
<Link to={"/about"}>About</Link>
<Route
path="/about"
children={({ match }) => (
<TransitionGroup component={firstChild}>
{match && <About />}
</TransitionGroup>
)}/>
<Route
path="/"
children={({ match }) => (
<TransitionGroup component={firstChild}>
{match && <Home />}
</TransitionGroup>
)}/>
</div>
)
}
}
Here is my src/Home.js
import React, { Component } from 'react';
import AnimatedWrapper from './AnimatedWrapper';
class Home extends Component {
render() {
return <div>hi</div>;
}
}
const H = AnimatedWrapper(Home);
export default H;
Here is my src/About.js
import React, { Component } from 'react';
import AnimatedWrapper from './AnimatedWrapper';
class About extends Component {
render() {
return <div>hi</div>;
}
}
const H = AnimatedWrapper(Home);
export default H;
Here is my src/AnimatedWrapper.js
import React, { Component } from "react";
import * as Animated from "animated/lib/targets/react-dom";
const AnimatedWrapper = WrappedComponent => class AnimatedWrapper
extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log('mount');
}
componentWillAppear() {
console.log('appear');
}
componentWillEnter() {
console.log('enter');
}
componentWillLeave() {
console.log('leave');
}
render() {
return (
<Animated.div className="animated-page-wrapper">
</Animated.div>
);
}
};
export default AnimatedWrapper;
At the end of the day, I'm just trying to follow this guide here https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a to try to do animated page transitions. I can't seem to do it without the mentioned lifeCycle functions.
