This question has been asked before but I could not find a solution that works. I have a simple router.navigate in the code like below on a button click

this.router.navigate(['/bill-read'], { queryParams: { serialNumber: this.data?.SerialNumber }} );  

On button click I see the below encoded URL in the browser with error route not found

https://localhost:4200/bill-read%3FserialNumber%3DC22LU003183 
which when decoded looks like below
https://localhost:4200/bill-read?serialNumber=C22LU003183

I have also tried using navgiateByUrl but getting similar error

this.router.navigateByUrl('/bill-read?serialNumber='+ this.data?.SerialNumber );