0

I have the following routes:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'product', component: ProductComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
];

In home component, I have a list of links:

<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=1">ALL</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=2">Jeans</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=3">Jackets</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=4">Coats</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=5">T-Shirts</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=6">Sneakers</a>
<a class="linkCategoriesInner__link" routerLink="/?gender=men&category=7">Hats</a>

When I clicked either of them, I get an error in console:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%3Fgender%3Dmen&category%3D3'
Error: Cannot match any routes. URL Segment: '%3Fgender%3Dmen&category%3D3'

Why is this error being emitted?

DanielBar
  • 11
  • 6
  • Does this answer your question? [How to pass query parameters with a routerLink](https://stackoverflow.com/questions/37880876/how-to-pass-query-parameters-with-a-routerlink) – Antoniossss Mar 08 '21 at 20:29

1 Answers1

2

You should use 'queryParams' to pass the parameters.

<a class="linkCategoriesInner__link" routerLink="/" [queryParams]="{gender: 'men', category: 7}">Hats</a>
Zam Abdul Vahid
  • 2,389
  • 3
  • 18
  • 25