Router does not match route on navigation

I have a HTML code:

      <table mat-table [dataSource]="claims" matSort class="mat-elevation-z8">
        <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ titleCase(column) }}</th>
      
          <td mat-cell *matCellDef="let element">
            <!-- Add clickable links for Claim Id -->
            <ng-container *ngIf="column === 'claimID'; else defaultCell">
              <a href="#" (click)="onClaimIdClick(element[column])">
                {{ element[column] }}
              </a>
            </ng-container>
            <ng-template #defaultCell>
              {{ getElementValue(element, column) }}
            </ng-template>
          </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

It loads the table correctly, I have added click functionality to claimId column.
TS code is:

onClaimIdClick(claimId: string): void {
    console.log('Navigating to:', `/claims-summary/${claimId}`);
    this.router.navigate(['/claims-summary', claimId]);
  }

When I click on entries under claimId, it redirects to next page, but calls unmatched route. This is my app.routes.ts.

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component';
import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component';
import { ClaimsComponent } from './components/claims/claims.component';

export const routes: Routes = [
    { path: '', component: LoginComponent }, // Default route for login
    { path: 'home', component: HomeComponent }, // route for home
    { path: 'claims', component: ClaimsComponent }, // route for claims
    { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary
    { path: 'claims-insights/:type', component: ClaimsInsightsComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page)
];

If I open the new url, http://localhost:4200/claims-summary/claimId in a new tab, it loads perfectly. But when I try to navigate to that page via onClick, it redirects to claim-summary, but calls unmatched route every time. What am I missing here?

Solution

Fix the Tag: Prevent default behavior:

<a (click)="onClaimIdClick(element[column])">{{ element[column] }}</a>

Validate Route: Ensure this.router.navigate(['/claims-summary', claimId]); matches the route:
```
{ path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }
```
Check Tag: Ensure it's in index.html:
```
<base href="/" />
```
Enable Router Tracing: For debugging, add in app.module.ts:
```
RouterModule.forRoot(routes, { enableTracing: true });
```

Optional: Use [routerLink] for simpler navigation:

<a [routerLink]="['/claims-summary', element[column]]">{{ element[column] }}</a>

Please check and lmk if it works