DEV Community

Cover image for Does the order of routes matter? Interesting issue (and fix) with a page not found component 🔎
Lorna Watson
Lorna Watson

Posted on • Edited on

3 3

Does the order of routes matter? Interesting issue (and fix) with a page not found component 🔎

Bit of a weird one... I'm not sure if this is well-known or just me 🤣 Either way, it's a good thing to know!

Issue

Routes suddenly stopped working. When trying the access http://localhost:4200/teamcity/builds I would see the page not found view instead.

const teamCityRoutes: Routes = [
  { path: '', component: TeamCityComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }, // ✨
  { path: 'builds', component: BuildsComponent }
];
Enter fullscreen mode Exit fullscreen mode

Fix

Order of the PageNotFoundComponent route. I can now the the builds view as expected.

const teamCityRoutes: Routes = [
  { path: '', component: TeamCityComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: 'builds', component: BuildsComponent },
  { path: '**', component: PageNotFoundComponent } // 😇
];
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
muhammedyousrii profile image
Muhammed Yousrii

Yes, I faced this problem once before,
And I think in all practical guides that you can find on the web
They always consider the order of the routes

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️