bug: Blank page when I navigate

[VeerneToor]

I have an IonButton that looks like this: <IonButton fill = "clear" size = "small" routerDirection = "back" routerLink = "/ Home" />, when I'm in /Home and going to the route /Chat everything is perfect, however when I go from /Chat to /Home this tab goes blank and as I see there is a div.can-go-back that has these properties = zIndex: x; display: none When I remove the display: none, the page already appears but if I handle everything from the app this error occurs

VERSIONS

Ionic:

   Ionic CLI       : 5.4.9 (C:\Users\XXXX\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework : @ionic/react 4.11.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Components Error Example
This code is the one I am working with and it is the one that causes me an error, however it is not the only component, it happens in any place where I use the routerLink method

INITIAL_ROUTE /Home

The only thing that stands out about this component is the renderOptions method since it is there that the items that have the RouterDirection are generated, these items are generated based on another method called renderItem() -> this.renderItem(), here we can see how I do use of routerDirection and routerLink

import React from 'react';
import ClientService from '../../services/ClientService';
import Loader from '../../components/Loader/Loader';
import ImageLoader from '../../components/image/imageLoader';
import { IonItem, IonIcon, IonLabel } from '@ionic/react';
import { bookmarks, person, text } from 'ionicons/icons';
import { RouteComponentProps, withRouter } from 'react-router';

interface state {
    userData: any
}
class ClientHome extends React.Component<{} & RouteComponentProps, state>{
    constructor(props: {} & RouteComponentProps) {
        super(props);
        this.state = {
            userData: 'Loading'
        }
    }
    componentDidMount(): void {
        new ClientService().getStorage('userData').then((value) => {
            return this.setState({
                userData: value
            });
        })
    }

    renderHeaderHome(): JSX.Element {
        return (
            <>
                {/* Contenedor de la cabecera */}
                <div style={{ width: '35%', height: '35%', margin: 'auto', display: 'block', borderRadius: '50%' }}>
                    <ImageLoader firebaseFullPath={this.state.userData.logo} borderRadius="50%" />
                </div>
                <h3>{this.state.userData.name}</h3>
            </>
        );
    }

    renderItem(icon, iconColor: string, title: string, context: string, route: string): JSX.Element {
        return (
            <IonItem lines="none" routerDirection="forward" routerLink={route} >
                <IonIcon icon={icon} slot="start" style={{ color: iconColor }}/>
                <IonLabel>
                    <h3>{title}</h3>
                    <p>{context}</p>
                </IonLabel>
            </IonItem>
        );
    }
    renderOptions(): JSX.Element {
        return (
            <div>
                {this.renderItem(person, '#000000d4', 'Mis contadores', 'Lista de mis contadores.', '/MyAccountans')}
                {this.renderItem(bookmarks, '#2e2e73', 'Mis documentos', 'Documentos del contador.', '/MyDocuments')}
                {this.renderItem(text, '#196e88', 'Chat', 'Habla con tu Contador.', '/Chat')}
            </div>
        );
    }

    renderContent(): JSX.Element {
        if (this.state.userData === 'Loading') {
            return <Loader isOpen />
        } else {
            return <div style={{ textAlign: "center" }}>
                {this.renderHeaderHome()}
                {this.renderOptions()}
            </div>
        }
    }

    render() {
        return (
            <>
                {this.renderContent()}
            </>
        );
    }
}
export default withRouter(ClientHome);

Second Route /Chat

_In this component the only thing to highlight is the

<IonButton fill = "clear" size = "small" routerDirection = "back" routerLink = "/ Home"> button
<IonIcon icon = {arrowBack} style = {{marginRight: "10px", borderRadius: "50%", color: "# 4b4bb9", fontSize: "3vh"}} />
</IonButton>

, from which, I assume, the problems of blank routes are generated_

import React from 'react';
import LayoutPage from '../../components/layoutPage/layoutPage';
import { IonItem, IonIcon, IonAvatar, IonLabel, IonButton } from '@ionic/react';
import { arrowBack } from 'ionicons/icons';

export default class Chat extends React.Component{


    renderHeaderChat(): JSX.Element {
        return (
            <IonItem lines="none">
                <IonButton fill="clear" size="small" routerDirection="back" routerLink="/Home">
                    <IonIcon icon={arrowBack} style={{ marginRight: "10px", borderRadius: "50%", color: "#4b4bb9", fontSize: "3vh" }} />
                </IonButton>

                <IonAvatar>
                    <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg" alt="asdasd asdasdasdasd" />
                </IonAvatar>

                <IonLabel style={{ marginLeft: "10px" }}>
                    <h3>Nombre Usuario</h3>
                    <p>Escribiendo</p>
                </IonLabel>
            </IonItem>
        );
    }

    render(){
        return(
            <LayoutPage header={this.renderHeaderChat()}>
                <h3>AQUI VA EL CHAT</h3>
            </LayoutPage>
        );
    }
}

[elylucas]

fixed in 4.11.9

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.