Clear all queryParams with new Router v3 Angular2

Question

I'm trying to figure out how to use the Angular2 router navigation (router 3.0.0-alpha.7) with query parameters.

I can easily navigate to a route with a queryParam with this line:

this._router.navigate(['/login'], {queryParams: {redirect: 'route1'}});

In the '/login' component, I do some login which will redirect to the redirect route, namely route1 here. However, after the redirection, the redirect query parameters stays in the URL, i.e. I'm now at page /route1?redirect=route1. I want to remove the redirect parameter here.

Moreover, if I then navigate to another page with the same redirect queryParam, it doesn't overwrite the previous one, but adds another ?redirect=... in the url. Namely:

this._router.navigate(['/another-route'], {queryParams: {redirect:'route2'}});

leads me to /another-route?redirect=route2?redirect=route1

Is it possible to clear the queryParams when navigating between routes? I tried this._router.navigate(['/route1'], {queryParams: {redirect: null}});, or {queryParams: null} etc but no success.

Answer 1

I struggled with this as well. You would expect the router to clear query params by default when navigating to another route...

You can do either

this._router.navigate(['/route1'], {queryParams: {}});

or

this._router.navigateByUrl('/route1');

or when using routerLink:

<a [routerLink]="['/applications']" [queryParams]="{}"> Applications</a>

Answer 2

Actually ... you should NOT "expect the router to clear query params".

Clearly you DO expect that. But that's because you don't know about an important router design decision ... probably because, unfortunately, we haven't told you about it in the docs yet. We're working on correcting that now.

QueryParams are for parameters that are global across navigations; they do not change.

MatrixParams are for parameters that belong to the current navigation; these do change.

What belongs in global QueryParams? Stuff that comes from the server are candidates. Like auth tokens that belong on every interaction.

But required route params (the :id in customer/:id) and optional matrix params (like the ;name=Jo* in /customers;name=Jo*) are local to one navigation. That's how you might specify a navigation for customers with an optional name filter.

Whether or not you agree with this approach, it is fundamental to the v.3 router design.

I suggest adjusting your expectations rather than fighting it.

Answer 3

You may wanna try this :

this.router.navigate(['target'], {preserveQueryParams: false});