Search code examples
angularangular2-routing

Clear all queryParams with new Router v3 Angular2

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.

Solution

  • 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>