question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue: Support NotFound Routes in IonRouterOutlet, old title: bug: Routing fall-through is not working on latest React build

See original GitHub issue

Bug 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:

  1. 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.

  2. Route to the first/most specific route (“/page1” in the case of the stackblitz)

  3. 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:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
elylucascommented, Jan 23, 2020

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" />

1reaction
devinshoemakercommented, Dec 18, 2019

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issue: Support NotFound Routes in IonRouterOutlet, old title ...
Issue: Support NotFound Routes in IonRouterOutlet, old title: bug: Routing fall-through is not working on latest React build #20105.
Read more >
Fallback/404 redirect for IonRouterOutlet in Ionic React
Issue : Support NotFound Routes in IonRouterOutlet, old title: bug: Routing fall-through is not working on latest React build.
Read more >
React router not working after building the app - Stack Overflow
This code works fine during development. But after building the app, its not working properly. The route to 404 page is only getting...
Read more >
How to fix BrowserRouter for React Apps on Apache
I'm trying to deploy OHIF viewer, that is based on react, and my problem is the /viewer route never gets called. I've tried...
Read more >
Page Not Found Error on Netlify Reactjs React Router solved
I got an error. Page Not Found. Looks like you've followed a broken link or entered a URL that doesn't exist on this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found