Problem with IonRouterOutlet and Public-Private routes on Ionic-React

[marcoselopez]

Hello everyone!
I’m having a rough time trying to make a router with authentication work and I’m really out of ideas here.

The problem is that for some reason when navigating from one route to another, the page that should render stays with the “ion-page-invisible” class and thus I get a blank page when navigating to that route.

So that you can understand a little better, I’ll show you the code I have.
I have a PrivateRoute component that looks like this:

Also a PublicRoute component that looks like this:

So you get the idea, if the user is logged, then go to the component of the route, if not, then redirect to where I’m saying.

This is my main Router:

And this is the MainRoutes component that’s being rendered when calling the PrivateRoute with the “/” route shown there:

When I navigate from welcome to Login it works ok, when I set the state of the user to logged from the Login, the PublicRoute logic kicks in and I get to the /credential route just fine, it renders the component ok.

The problem appears when I set the state of the user to logged out from /credential, this should make the logic from PrivateRoute to kick in and redirect me to /Welcome again, which it does, but I get this:

As you can see, a blank page with the divs containing the “ion-page-invisible” classes, if I provoke any changes to the component or simply refresh the page, it renders ok.

I couldn’t find a solution for this problem yet, I’ve tried every piece of code out there, but nothing seems to work.

Is it a problem with IonRouterOutlet? Cause as you can see, I have 2 defined. One with the PublicRoutes and one inside the MainRoutes component which I use to render the Menu once you are logged.

Please if you have any idea I would be really grateful.

Have a nice day Folks!

---

EDIT: Things that I’ve noticed:
When I’m inside the /credential route, rendering the component, I see the two ion-router-outlets on the DOM, the one that contains the public routes, which is the one without ID, is empty:

While here, if I refresh the page before clicking the exit button (which triggers the state change to logout) and then I click it, everything works fine, the PrivateRoute logic kicks in, I get redirected to /welcome and the component renders ok.

So, why when I change to another ion-router-outlet the old one is still in the DOM? It has anything to do with the problem I’m having?

EDIT 2: If I remove the ion-router-outlet that wraps the PublicRoute components, everything works fine, so it is indeed a problem with the ion-router-outlet:

Anyone has had this problem before?

I’m really sorry for all this questions, I’m kinda new to Ionic and I couldn’t find a solution for this on any post or github ticket.

Thank you again!

[marcoselopez]

I apologize for the continued reply but I can’t further edit the previous post and I wanted to let anyone who might be having the same issue know that this is how I solved it:

I created a separate component that contains all of my public routes and wraped those routes inside a IonRouterOutlet:

Then, in my main AppRouter I deleted every IonRouterOutlet and just wraped the components inside the IonReactRouter, like this:

With this configuration, everything works fine, it solves the issue, but I noticed that when animating the change of routes, it had a little flicker on the animation when the components rendered, so in addition, I’ve changed my PublicRoute and PrivateRoute components to this logic:

And voilà! The animation is smooth, and the routes change perfectly when the user logs in or out.

The only problem I’ve noticed with this is that if in the AppRouter I define the path to the PublicRoute component to any path other than “/*”, then I get blank pages again, its like Ionic doesn’t like Redirects inside that component, but well, for now, it works fine.

I hope this helps anyone.

Have a nice day folks!

[aaronksaunders]

found this on stackblitz - Ionic React Router V5 Transitions (forked) - StackBlitz

[serar112]

Thank you for sharing this detailed thread.

I’m facing a similar situation and found your solution really strong! Sadly, there is an issue with the above implementation (in my app), for example, if my MainRoutes component had an exact route “/credential/:ID”, it would redirect me all the time to “/credential”…

I’m not sure how to fix this situation…