bug: React Router renders white page with Redirect

[lorenzo-bonatti]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

From the version v7.5.1, there is a bug with the Redirect component.

Let's suppose that we want to manage our routes with authentication and that the routes redirect to the login or home page depending on a context (ex. Redux state)

A possible route definition can be like this:

<IonReactRouter>
    <IonRouterOutlet>
        <Route path="/login" exact render={() => !auth.isAuth ? <Login/> : <Redirect to="/"/>}/>
        <Route path="/" exact render={() => auth.isAuth ? <Home/> : <Redirect to="/login"/>}/>
        <Route path="/about" exact render={() => auth.isAuth ? <About/> : <Redirect to="/login"/>}/>
    </IonRouterOutlet>
</IonReactRouter>

If I'm on the login page and the state changes, the component Redirect works correctly and it redirects me to the home page.
The problem occurs if I come back to the login page (for example with the logout): the page will be blank.

Expected Behavior

The page renders correctly as in previous versions. (<= v7.5.0)

Steps to Reproduce

1. Render the first page;
2. Change the global state to render the Redirect component;
3. Return to the first page with another state change;

Code Reproduction URL

https://github.com/lorenzo-bonatti/my-ionic-app

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0
   Ionic Framework : @ionic/react 7.6.4

Utility:

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

System:

   NodeJS : v20.11.0 (/home/lorenzo/.asdf/installs/nodejs/20.11.0/bin/node)
   npm    : 10.2.4
   OS     : Linux 6.5

Additional Information

No response

[sean-perkins]

Hello @lorenzo-bonatti thanks for reporting this issue!

I can confirm this behavior regressed in v7.5.1 from this change: #28316 (specifically the change to PageManager).

I will need to do additional discovery to see why the Redirect component is effected by this change.

[sean-perkins]

Hello @lorenzo-bonatti, I've done some additional investigation and I think we can leave the removal of the event listener when the element node is detached and garbage collected.

If you would to test with this dev-build and let me know if you experience any unexpected issues:

npm install @ionic/react@7.6.7-dev.11706567011.11e782a9 @ionic/react-router@7.6.7-dev.11706567011.11e782a9

You will need to delete the node_modules/.vite directory to avoid the dependency pre-bundling feature.

Thanks!

[lorenzo-bonatti]

Hello @sean-perkins

I tried your code versions with my my-ionic-app project, and it works properly.

Can I use this version for my production project, or is it better wait for the release?

Thanks for you support!

[sean-perkins]

Hello @lorenzo-bonatti, thank for verifying the dev-build!

I would recommend staying with your current version (< 7.5.1) in a production environment. Once this fix is officially reviewed and merged by the team, it would be acceptable to use in production.

I want to investigate a few more techniques before moving forward with removing the event listener: 1e782a9.

[aeharding]

FWIW, I ran into this bug and I've been testing your patch @sean-perkins, and it's working well so far!