Flickering/Black glitch while redirecting to some other page

Hey there, We decided to go with ionic react for our patient application and we are nearly done with that. While setting page boundaries. I’ve decided to redirect the user based on a context value and preventing from falling into any unmatched route.

Here is how I declared that:

return <QueryClientProvider client={queryClient}>

    <IonApp>

      <IonReactRouter>

        <IonSplitPane contentId="main">

          {isLoggedIn && <Menu />}

          <IonRouterOutlet id="main">

            <Route path="/home" render={() => isLoggedIn ? <Home /> : <Redirect to="/login" />} exact={true} />

            <Route path="/payment-history" render={() => isLoggedIn ? <PaymentHistory /> : <Redirect to="/login" />} exact={true} />

            <Route path="/renewal" render={() => isLoggedIn ? <Packages /> : <Redirect to="/login" />} exact={true} />

            <Route path="/session-result/:type" render={() => isLoggedIn ? <SessionResult /> : <Redirect to="/login" />} exact={true} />

            <Route path="/treatment-plan" render={() => isLoggedIn ? <TreatmentPlan /> : <Redirect to="/login" />} exact={true} />

            <Route path="/profile" render={() => isLoggedIn ? <Profile /> : <Redirect to="/login" />} exact={true} />

            <Route path="/cancellation-policy" render={() => isLoggedIn ? <CancellationPolicy /> : <Redirect to="/login" />} exact={true} />

            <Route path="/terms-and-conditions" render={() => isLoggedIn ? <TermsAndConditions /> : <Redirect to="/login" />} exact={true} />

            <Route path="/help" render={() => isLoggedIn ? <Help /> : <Redirect to="/login" />} exact={true} />

            <Route path="/notifications" render={() => isLoggedIn ? <Notifications /> : <Redirect to="/login" />} exact={true} />

            <Route path="/getting-started" render={() => isLoggedIn ? <GettingStarted /> : <Redirect to="/login" />} exact={true} />

            <Route path="/progress-report" render={() => isLoggedIn ? <Progress /> : <Redirect to="/login" />} exact={true} />

            <Route path="/policies" render={() => isLoggedIn ? <Policies /> : <Redirect to="/login" />} exact={true} />

            <Route path="/login" render={() => !isLoggedIn ? <Authentication /> : <Redirect to="/home" />} exact={true} />

            <Route render={() => !isLoggedIn ? <Redirect to={'/login'} /> : <Redirect to={'/home'} />} />

            {/* <Redirect to={ !isLoggedIn ? '/login' : '/home' } /> */}

            {/* { MountedRoutes } */}

          </IonRouterOutlet>

        </IonSplitPane>

      </IonReactRouter>

    </IonApp>

    { process.env.REACT_APP_ENV_STAGE === 'dev' && <ReactQueryDevtools initialIsOpen={false} />}

  </QueryClientProvider>;

Navigation is working fine but there is an issue with how it’s animating, it ended up giving strange flickering while moving from one page to other page. One thing which I observed is when I refresh the page, flickering goes away and everything works as expected.

Here is the package.json:

{

  "name": "patient-app",

  "version": "0.0.2",

  "private": true,

  "dependencies": {

    "@capacitor/android": "3.3.4",

    "@capacitor/app": "1.0.7",

    "@capacitor/clipboard": "^1.0.6",

    "@capacitor/core": "3.3.3",

    "@capacitor/haptics": "1.1.3",

    "@capacitor/keyboard": "1.2.0",

    "@capacitor/splash-screen": "^1.2.0",

    "@capacitor/status-bar": "^1.0.6",

    "@dotmind/react-use-pwa": "^1.0.4",

    "@frogress/line": "^1.1.0",

    "@ionic/react": "^6.0.0",

    "@ionic/react-router": "^6.0.0",

    "@testing-library/jest-dom": "^5.11.9",

    "@testing-library/react": "^11.2.5",

    "@testing-library/user-event": "^12.6.3",

    "@types/jest": "^26.0.20",

    "@types/node": "^12.19.15",

    "@types/react": "^16.14.3",

    "@types/react-dom": "^16.9.10",

    "@types/react-router": "^5.1.11",

    "@types/react-router-dom": "^5.1.7",

    "chart.js": "^3.7.0",

    "classnames": "^2.3.1",

    "contentful": "^9.1.6",

    "date-fns": "^2.28.0",

    "firebase": "^9.6.1",

    "framer-motion": "^4.1.17",

    "html-react-parser": "^1.4.5",

    "ionicons": "^5.4.0",

    "lodash": "^4.17.21",

    "react": "^17.0.1",

    "react-chartjs-2": "^4.0.0",

    "react-dom": "^17.0.1",

    "react-icons": "^4.3.1",

    "react-lines-ellipsis": "^0.15.0",

    "react-onesignal": "^2.0.2",

    "react-otp-input": "^2.4.0",

    "react-phone-input-2": "^2.14.0",

    "react-query": "^3.34.12",

    "react-router": "^5.2.0",

    "react-router-dom": "^5.2.0",

    "react-scripts": "4.0.2",

    "styled-components": "^5.3.3",

    "typescript": "^4.1.3",

    "web-vitals": "^0.2.4",

    "workbox-background-sync": "^5.1.4",

    "workbox-broadcast-update": "^5.1.4",

    "workbox-cacheable-response": "^5.1.4",

    "workbox-core": "^5.1.4",

    "workbox-expiration": "^5.1.4",

    "workbox-google-analytics": "^5.1.4",

    "workbox-navigation-preload": "^5.1.4",

    "workbox-precaching": "^5.1.4",

    "workbox-range-requests": "^5.1.4",

    "workbox-routing": "^5.1.4",

    "workbox-strategies": "^5.1.4",

    "workbox-streams": "^5.1.4"

  },

I’m not sure what’s going wrong here. I tried all the other solutions mentioned on other posts as well but non of them working.

Here is a video showing the issue:

Observation 2: Removing the default route makes it normal again. But I need a default route in order to prevent user to move to unmatched route

Hey there! Can you try install 6.0.5?

npm install @ionic/react@6.0.5 @ionic/react-router@6.0.5

Sure, let me give it a try

It’s still there. Installed both of them, still happening

Can you try to replicate this in a small isloated demo?

This will take some time but i’ll do it tomorrow. I’ll update it here, Thanks for helping out. Anyways can you please point me to a source where we did some auth redirections with Redirect component. I’m having some doubt there might be some problem with the Redirect component.

Here is the code demo GitHub - ashishbairwa/router-bug-ionic

From the look of things, it seems you’re missing a path property on one of your routes.

--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
             <Route path="/bairwa" exact={true}>
               <Bairwa />
             </Route>
-            <Route render={() => <Redirect to={'/home'} />} />
+            <Route path="/" exact={true} render={() => <Redirect to={'/home'} />}  />
           </IonRouterOutlet>
         </IonSplitPane>
       </IonReactRouter>

So I looks like the router was trying to always render Home, which doesn’t seem right. Removing it addresses the issue

I have the same issue after migration to ionic 6, the problem is also present in the ionic-react-conference-app, even without adding anything just running the code you can see the flickering when moving between tabs.

Is there a solution where the fallback route still exists?

There was an issue about this bug filed and discussion is ongoing here: bug: React fallback route causes flicker transition when routing between pages · Issue #24855 · ionic-team/ionic-framework · GitHub