### Prerequisites
- [X] I have read the [Contributing Guidelines](https://git…hub.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
- [X] v4.x
- [X] v5.x
- [X] v6.x
### Current Behavior
Summary:
> Navigating to a random page right after implementing a default or a guarded route or a fallback route (following the method suggested in docs also https://ionicframework.com/docs/react/navigation#fallback-route) and then moving back and forth in the app leads to flickering/black glitch. Reloading the same page seems to correct this issue.
Context:
> 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 prevent 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.
### Expected Behavior
The default route should land on the target page and would not produce any flickering or black glitch while moving in the app
### Steps to Reproduce
Please follow the git https://github.com/ashishbairwa/router-bug-ionic for the walkthrough.
Alternatively:
1) Create a new ionic react app with template as sidemenu.
2) Add two pages in the app
3) Add the routes for them and place a default route following this https://ionicframework.com/docs/react/navigation#fallback-route
4) Implement buttons to move back and forth across page.
5) Moving to any page right after entering an undefined route in the URL would lead to glitch
### Code Reproduction URL
https://github.com/ashishbairwa/router-bug-ionic
### Ionic Info
Ionic:
Ionic CLI : 6.18.1 (C:\Users\Ashish Bairwa\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/react 6.0.5
Capacitor:
Capacitor CLI : 3.3.3
@capacitor/android : 3.3.4
@capacitor/core : 3.3.3
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.14
OS : Windows 10
### Additional Information
Video proofs:
https://youtu.be/kuEK9mkZx84
https://youtu.be/wg8vt6HvBlY
Linked issue in forum: https://forum.ionicframework.com/t/flickering-black-glitch-while-redirecting-to-some-other-page/220096/8
