Ionic-framework: bug(react): enter page again will show a blank page.

[david2tdw]

Bug Report

Ionic version:


[x]4.11.2

Current behavior:

it will show a blank page at step 7.

Expected behavior:

it should show the content in NewItem page.

Steps to reproduce:

1. just create a new app follow the instruction:
   https://ionicframework.com/docs/react/your-first-app
2. change the codes as described on above page.
3. run server.
4. click the plus button, navigate to the NewItem page.
5. refresh the NewItem page.
6. click the back arrow back to the home page.
7. click the plus button again.

[OoDeLally]

I have the exact same problem here.

[liamdebeasi]

Thanks for the issue. Can you clarify your steps to reproduce? I am seeing the following behavior:

1. Click plus button, navigate to the NewItem page.
2. Refresh the page.
3. Click the ion-back-button.

After that, I am not redirected to the home page (The back button probably shouldn't be showing up, but that's a separate issue).

If I set the defaultHref on ion-back-button to "/" and try those steps again, I am brought back to the main page. From there, clicking on the plus button correctly brings me to the NewItem page again.

[OoDeLally]

@liamdebeasi Do exactly what @david2tdw suggested.
After the 3 steps you mentioned, From the home page, click on the on the (+) button.
You will go to new page, but the components will not be rendered.
The console doesnt show any error.

[liamdebeasi]

I am doing that, but I am not able to reproduce the issue you are describing. I am working off this repo: https://github.com/liamdebeasi/ionic-react-bug

[OoDeLally]

In NewItem.tsx, replace

<IonBackButton />

by

<IonBackButton defaultHref="/home" />

And try again.
I could reproduce it in your repo after making this modification.

[liamdebeasi]

Oh interesting, locally I was doing defaultHref="/" which still sends me to the main page, but doesn't reproduce the bug. I can reproduce the bug now using defaultHref="/home". We will look into a fix for this. Thanks!

[aissa-bouguern]

I have the same issue here!
It happens with any Router link (Link & history.push() & IonRouterLink), not only IonBackButton.

[aykamko]

Here's a React hook that provides a workaround until this gets patched.

/**
 * HACK: Prevents an IonPage from rendering blank when it re-enters.
 * Source: https://github.com/ionic-team/ionic/issues/19750
 */
export const useFixIonPageReentry = () => {
  const pageRef = React.useRef<any>();
  useIonViewWillEnter(() => {
    const pageElem = pageRef.current && pageRef.current.ref.current;
    if (pageElem) {
      pageElem.style.removeProperty("display");
    }
  });

  return pageRef;
};

Use it in your page component like so:

const CoolPage: React.FC = () => {
  const pageRef = useFixIonPageReentry();

  return (
   <IonPage ref={pageRef}>
     {...}
   </IonPage>
  );
};

Hope this helps!

[elylucas]

Hello, this issue should be fixed in 4.11.3. Please give it a try and if you find more issues, comment here and we can reopen this issue.

[ionitron-bot[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.