CODEWITHSUNDEEP
angular
DanielBar
DanielBar

Reputation: 11

Browser cant navigate to route link

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?

Upvotes: 0

Views: 67

Answers (1)

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

You should use 'queryParams' to pass the parameters.

<a class="linkCategoriesInner__link" routerLink="/" [queryParams]="{gender: 'men', category: 7}">Hats</a>

Upvotes: 2

Related Questions