CODEWITHSUNDEEP
angularrouter
David Pascoal
David Pascoal

Reputation: 1441

Cannot match any routes: with Query Params

I'm trying to call a route with an optional param.

My router

const appRoutes: Routes = [

    { path: '', redirectTo: 'bo', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'bo', component: LayoutComponent, 
        children: [
            { path: '' , redirectTo: 'history', pathMatch: 'full'},
            { path: 'history', component: HistoryComponent } ,
            { path: 'history/details:id', component: DetailsComponent }

        ]   
    },    
];

How i call it 

this.router.navigate(['./details', {id: myVarID}], { relativeTo: this.route });

Error: Cannot match any routes: 'bo/history/details;id=myIdValue'

But it works if i define it in the router with a slash and call it by manually inserting in the url:

{ path: 'history/details/:id', component: DetailsComponent }

Even if i add a ';' instead of a '/' in the router it does not work. I want to call the route with the router.navigate function!

Upvotes: 0

Views: 6677

Answers (2)

David Pascoal
David Pascoal

Reputation: 1441

Alright, so it seems i made a big confusion.

I wanted to access the route with Query Parameters but without the slash, thus the solution is:

Route:

{ path: 'history/details', component: DetailsComponent }

Call:

this.router.navigate(['details', {id: myVarID}], { relativeTo: this.route });

/:id is not here, because the query params are not to be preceded by a slash and are optional. The route created will be /bo/history/details;id=myVarIDContents

And inside the details component i can get the query params as:

export class DetailsComponent implements OnInit {

  constructor(public route: ActivatedRoute)  { }

  ngOnInit() {
    console.log(this.route.params.value);
  }

}

Upvotes: 3

micronyks
micronyks

Reputation: 55443

{ path: 'history/details:id', component: DetailsComponent }

change it to,

{ path: 'history/details/:id', component: DetailsComponent } //<----need to put router param after slash

and call it like,

this.router.navigate(['/details', {id: myVarID}]

Upvotes: 0

Related Questions