Angular 2 Router not navigating properly for query parameters

Question

I am implementing login functionality for my Angular app. When a user tries to login I route them to the login component like so:

this.router.navigate(['login'], {
  queryParams: {
    return: this.url
  }
});

When they login in, it returns them to the page where they were on.

This works fine for locations in the app like:

http://localhost:4200/category/Americana

When I go to the login page the URL looks like:

http://localhost:4200/login?return=%2Fcategory%2FAmericana

And it returns properly to:

http://localhost:4200/category/Americana

However, when I try to login from a route with a query parameter like so:

http://localhost:4200/categories/0?nav=All

The login page looks like this:

http://localhost:4200/login?return=%2Fcategories%2F0%3Fnav%3DAll

But the return page it goes to looks like this:

http://localhost:4200/categories/0%3Fnav%3DAll

And therefore when I try and get the parameters from the route, they are blank, becuase it has been mashed up in the route navigation.

How do i get the return functionality working for query parameters? Thanks - I'm new to this routing stuff - go easy on me :)

Answer 1

This was fixed by doing as suggested by the comment of J. Pinxter, using

this.router.navigateByUrl('categories/0?nav=All')