Lifecycle methods not triggered - class components

Ionic Framework Ionic React
1

Hey everyone. I need your help. I am very frustrated, because I spent a lot of time now finding out why the lifecycle methods not getting triggered. I broke down my app to these three files. I will post them now. I don’t get any console.log(…) from any lifecycle method.
Please help me. I don’t get why they are not fired.

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorkerRegistration from './serviceWorkerRegistration'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import configureStore from './store'

const store = configureStore()

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister()

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

App.jsx

import { Route } from 'react-router-dom'
import { IonApp, IonRouterOutlet, withIonLifeCycle } from '@ionic/react'
import { IonReactRouter } from '@ionic/react-router'

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css'

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css'
import '@ionic/react/css/structure.css'
import '@ionic/react/css/typography.css'

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css'
import '@ionic/react/css/float-elements.css'
import '@ionic/react/css/text-alignment.css'
import '@ionic/react/css/text-transformation.css'
import '@ionic/react/css/flex-utils.css'
import '@ionic/react/css/display.css'

/* Theme variables */
import './theme/variables.css'

import { setupIonicReact } from '@ionic/react'

import Index from './pages/Index/Index'

import React from 'react'

setupIonicReact({
    //we may need this later
    //mode: 'md'
})

class App extends React.Component {
    ionViewWillEnter() {
        console.log('ionViewWillEnter event fired')
    }

    ionViewWillLeave() {
        console.log('ionViewWillLeave event fired')
    }

    ionViewDidEnter() {
        console.log('ionViewDidEnter event fired')
    }

    ionViewDidLeave() {
        console.log('ionViewDidLeave event fired')
    }

    render() {
        return (
            <IonApp>
                <IonReactRouter>
                    {/* <Menu /> */}
                    <IonRouterOutlet id="main-content" animated>
                        <Route path="/" component={Index} />
                        ... some more routes here ...
                    </IonRouterOutlet>
                </IonReactRouter>
            </IonApp>
        )
    }
}

export default withIonLifeCycle(App)

Index.jsx

import { IonContent, IonPage, IonToast, withIonLifeCycle } from '@ionic/react'
import React from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

import { resetErrorMessage, resetInfoMessage } from '../../actions'
import { isEmpty } from 'lodash'
import { compose } from 'redux'

class Index extends React.Component {
    ionViewWillEnter() {
        console.log('ionViewWillEnter event fired')
    }

    ionViewWillLeave() {
        console.log('ionViewWillLeave event fired')
    }

    ionViewDidEnter() {
        console.log('ionViewDidEnter event fired')
    }

    ionViewDidLeave() {
        console.log('ionViewDidLeave event fired')
    }

    renderInfoMessage = () => {
        const { infoMessage, resetInfoMessage } = this.props

        if (isEmpty(infoMessage)) {
            return null
        }

        return (
            <IonToast
                isOpen={true}
                onDidDismiss={resetInfoMessage}
                message={infoMessage}
                duration={5000}
            />
        )
    }

    renderErrorMessage = () => {
        const { errorMessage, resetErrorMessage } = this.props

        if (isEmpty(errorMessage)) {
            return null
        }

        return (
            <IonToast
                isOpen={true}
                color="danger"
                onDidDismiss={resetErrorMessage}
                message={errorMessage}
                duration={5000}
            />
        )
    }

    renderSuccessMessage = () => {
        const { successMessage, resetSuccessMessage } = this.props

        if (isEmpty(successMessage)) {
            return null
        }

        return (
            <IonToast
                isOpen={true}
                color="success"
                onDidDismiss={resetSuccessMessage}
                message={successMessage}
                duration={5000}
            />
        )
    }

    render() {
        return (
            <IonPage>
                <IonContent>
                    {this.renderInfoMessage()}
                    {this.renderErrorMessage()}
                    {this.renderSuccessMessage()}
                </IonContent>
            </IonPage>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        errorMessage: state.errorMessage,
        infoMessage: state.infoMessage,
        successMessage: state.successMessage,
        user: state.user,
    }
}

const enhance = compose(
    connect(mapStateToProps, {
        resetErrorMessage,
        resetInfoMessage,
    }),
    withRouter,
    withIonLifeCycle
)

export default enhance(Index)