title: router.navigate with query params Angular 5
body: <p>I'm having an issue with routing to a route with query params I have a function like so</p>
  
  <pre><code>goToLink(link) {
      this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
  }
  </code></pre>
  
  <p>and this function</p>
  
  <pre><code>sortParams(link) {
      let queryParams = url.split('?')[1];
      let params = queryParams.split('&amp;');
      let pair = null;
      let data = {};
      params.forEach((d) =&gt; {
        pair = d.split('=');
        data[`${pair[0]}`] = pair[1];
      });
      return data;
  }
  </code></pre>
  
  <p>okay so basically what Is happening I have a function called <code>goToLink()</code> and that takes in a url and the url that gets passed is a string with query params like so..</p>
  
  <p><code>https://website.com/page?id=37&amp;username=jimmy</code></p>
  
  <p>the above is just an example thats not what it actually looks like but its a link string with query parameters now so what happens is I remove the params from the string and store them in a data object in the <code>sortParams()</code> function so when I pass the above string in I get an object that looks like this</p>
  
  <p><code>{id: 37, username: 'jimmy'}</code></p>
  
  <p>now thats what i'm passing into the <code>queryParams:</code> section in the router.navigate, </p>
  
  <p>the function should look like this when the object is returned</p>
  
  <pre><code>this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);
  </code></pre>
  
  <p>so i successfully route to the desired route but the query params look like this.. </p>
  
  <p><code>/page;queryParams=%5Bobject%20Object%5D</code></p>
  
  <p>Am I doing something wrong here??</p>
  
  <p>Any help would be appreciated!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If I just change the function to this</p>
  
  <pre><code> this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);
  </code></pre>
  
  <p>I get the same url <code>/page;queryParams=%5Bobject%20Object%5D</code></p>