Angular routing with params, redirect route with params separately from one without params

Question

In an Angular (v7) application, I have routing setup like this:

export const routes: Routes = [
  {
    path: '', 
    component: HomeComponent,
    children: [{
      path: '',
      component: Main
    },
    {
      path: 'main',
      component: Main
    },
     {
      path: 'search/:imageid',
      component: Image
    }, 
    {
      path: 'search',
      component: Search
    }]
}]

What I'm expecting to happen, is for a URL like this:

domain.com/#/search;imageid=512

The router will redirect to the Image component, and for a URL like this:

domain.com/#/search

The router will redirect to the Search component, but Search is getting both, and the route to Image is being bypassed.

I'm not sure what I'm missing here.

Qortex Qortex · Accepted Answer · 2019-04-04T07:24:46

You don't need to repeat the name of your path variable.

The path you should use is domain.com/#/search/512 and the router will handle the variable as expected.

(make sure you correctly defined your HashLocationStrategy).

Also, it can be useful to know the existence of the pathMatch: 'full' property on routes, that allows to match the whole path and not just the prefix. It could be the issue here, but it is not because of the order in which you put the children routes. Have a look at this place in the official docs for a more precise development.

Angular routing with params, redirect route with params separately from one without params

1 Answers