Angular route with Query Parameter and Appended Route

Question

I am using angular 9 application.

I have a routing file with the below code :

{ path: 'a/:id', component: AComponent }, { path: 'a/b', component: BComponent }, { path: 'a/c', component: CComponent }

I want to have the same route 'a' with query parameter id as well as appended routes (b & c)

When I am trying to navigate to 'a/b' OR 'a/c', the URL in the browser gets updated, however, it doesn't actually navigates to the desired route.

Is there any way to achieve this?

Route a/:id match all cases. If you really need this kind of routes, try to change the order of elements. The most generic rule should be last. — Karol T
– Karol T, Commented Jun 11, 2020 at 23:15
In vueJs this is common and you need to watch the route, check this out stackoverflow.com/questions/34444822/… — Sweet Chilly Philly
– Sweet Chilly Philly, Commented Jun 11, 2020 at 23:36

Rachid O · Accepted Answer · 2020-06-11 23:23:41Z

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

In your case:

{ path: 'a/b', component: BComponent }, { path: 'a/c', component: CComponent }, { path: 'a/:id', component: AComponent },

Can't believe I missed this simple thing. Thank you so much!

Collectives™ on Stack Overflow

Angular route with Query Parameter and Appended Route

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related