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!

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