ionic-framework: bug: Ionic React conditional routing not updating same way as plain react

Bug Report

Ionic version:

[ ] 4.x [x] 5.x v5.5.1

Current behavior:

Conditional routing does not update(responsive), It checks and routes for the first time, but when the value/result for the condition changes the routes are not updated. It works in react though

Expected behavior:

Routes as a result of condition should get updated as when the result of the condition changes.

Steps to reproduce:

I’ve taken blank Ionic project, added two sets of routes and using a condition rendered resulting route. Sample code lands on login page. Upon login ideally should navigate to home page but doesnt. Same code is used in a plain react project, where it works.

Plain React code https://stackblitz.com/edit/react-ts-conditional-route?file=src%2FApp.tsx

Other information:

forum question - however the solution provided might work for the first time the condition is checked, not when the condition result is updated. (also included this alternative in the sample code) https://forum.ionicframework.com/t/how-to-render-routes-conditionally/182404/2 https://github.com/aaronksaunders/react-firebase-upload-hook-capacitor/blob/a374d37a72dcb556444b42799959a96b6983ec81/src/App.tsx

I believe this worked in V5.2.x.

Ionic info:


Ionic:

   Ionic CLI       : 6.12.2 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.5.1

Capacitor:

   Capacitor CLI   : 2.4.3
   @capacitor/core : 2.4.3

Utility:

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

System:

   NodeJS : v14.15.1 (/usr/bin/node)
   npm    : 6.14.8
   OS     : Linux 5.4

Kindly help solve the issue. Thank you.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 5
Comments: 23 (2 by maintainers)

Most upvoted comments

Hey all, I wanted to provide an update on this one.

The crux of the issue is that IonRouterOutlet doesn’t currently support swapping out routes here and there well (like using one set of routes for authenticated users and one set of routes for non-authed users). This is something we want to support well and are working on it, but it is a large change and is taking time to go through and test. Hopefully we will have an update for it soon.

elylucas on Dec 15, 2020

@captaincole, we ran into the same issue (among many others).

For us, the double animation was solved by ensuring we are passing all props to the child <Route>. I think the crux is an implicit computedMatch property (~ match) that is normally passed from IonRouterOutlet (and <Switch>) to all child Routes. Guessing Ionic is using this to control animations.

So:

const PrivateRoute: React.FC<PrivateRouteProps> = ({ component, ...rest }) => {
  // Watch Authentication!
  const { userId } = useContext(UserContext)
  return (
    <Route
      {...rest}
      render={() => {
        return userId ? <component /> : <Redirect to="/login" />
      }} />
  )
}

That works for us, though routing still breaks after logging out/in more than once.

the1979 on Aug 23, 2021

hey, @elylucas it’s been a few months, any updates? we have run into this bug trying to upgrade to the latest version of ionic-react and we seem to be blocked.

Hi @pdsullivan, we’ve also run into this bug, have you guys already have a work around on this one? we’re using the latest ionic version v7 by the way.

condinoaljoseph on Nov 7, 2023

hey, @elylucas it’s been a few months, any updates? we have run into this bug trying to upgrade to the latest version of ionic-react and we seem to be blocked.

pdsullivan on Apr 29, 2021

@ar-daniel Please look at the latest changes now - https://stackblitz.com/edit/ionicreact-ts-conditional-routing?file=src%2FApp.tsx

Yes. That’s where I would differ in the implementation of the Routes in the example you have. You should register all the routes, but for the authenticated routes, create like a “RestrictedRoute” component that internally checked for authentication/Authorization and Redirect internally, rather than on the main component.
My changes were just to show the usage of the state check with in the Router; and that seems to be resolved. The rest is the logic you have to move internally and use the “history” object of the react-router to navigate. Let me know if this works. I made changes to the Login and handle_login event

samuelsunil on Dec 7, 2020

@samuelsunil In the code snippet you’ve provided - The routes are always redirected to /login if not authenticated and / home if authenticated. Unable to load any other route.

eg, before logging in, try to load route /register (which is a non authenticated route, already present in the sample code), it gets redirected to /login. same would be the case with authenticated routes when other routes than /home is present.

ar-daniel on Dec 7, 2020