How to render routes conditionally?

Ionic Framework Ionic React
1

I am on my first Ionic build and have come unstuck with routing. Usually in straight react without Ionic, I just check if there is a valid user, if so I render logged in routes, if not I render auth routes, both in a Switch.

I have tried this approach in Ionic but I just get a blank screen.

I have put a S/O question here where you can see the code:

I really just need to know how to render routes dynamically and redirect on a successful user prop rerendering the app.

Thanks in advance.

2
2 Likes
3

Thank you for that Aaron.

Is this a standard approach or just a work around that you have found? It feels like a lot of work around Ionic rather than using it. Not a criticism at all, I am just trying to understand.

It is not immediately obvious to me how 404 would be handled in this case?

Prior to your reply I had gone down the following route on every route:

<Route
path=“/RegulatorDashboard/:id”
exact={true}
render={props => {
return user !== null ? (
<RegulatorDashboard {…props} />
) : (

);
}}
/>

This again cannot cover 404 and it really feels unsecure in case a future dev forgot to add the ternary on each route.

Feels like surely there is a more simple and standard route?

Thanks again, I really appreciate the help.

4

That is a standard approach, if you look up react router you will see this is an approach they use

1 Like