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

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay