Issue: Support NotFound Routes in IonRouterOutlet, old title: bug: Routing fall-through is not working on latest React build
See original GitHub issueBug Report
Ionic version: [x] 4.11.7
Current behavior: When setting up sequential routes, all routes are rendered in layers rather than just the most specific.
Expected behavior: Only the most specific route should be matched and rendered.
Steps to reproduce:
-
Set up multiple routes with different specificity. Standard routing indicates that the first matching route (or most specific route) should be matched and rendered. The Stackblitz included below has “/page1” followed by a catchall “/” for any routes that don’t match.
-
Route to the first/most specific route (“/page1” in the case of the stackblitz)
-
Note that the second route is rendered “over” the first, making it seem like the first isn’t rendered at all.
Related code:
https://stackblitz.com/edit/ionic-v4-11-7-route-not-found
In the stackblitz, in addition to seeing the NotFound page rendered when the path is “/page1”, you can look at the console to see that both routes are actually being rendered. Further, if you swap the order of the routes, you can see that the page appears to render correctly but both routes are still being rendered (NotFound is just underneath Page1).
Other information:
Ionic info:
Ionic:
Ionic CLI : 5.4.13 (/Users/evan/.config/yarn/global/node_modules/ionic)
Ionic Framework : @ionic/react 4.11.7
Capacitor:
Capacitor CLI : 1.4.0
@capacitor/core : 1.4.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v13.1.0 (/usr/local/Cellar/node/13.1.0/bin/node)
npm : 6.12.1
OS : macOS Catalina```
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:7 (6 by maintainers)
Top GitHub Comments
Not round routes are now available in 4.11.9.
To use one, setup one of the routes below inside of the
<IonRouterOutlet>
<Route render={() => <Redirect to="/tab1" />} />
or
<Redirect to="/tab1" />
I see. This is essentially what I thought you had meant, just simplified with the /app route predicate. I tested your solution and it seems to work on my project, thanks!