Angular RouterLink Navigation

What is RouterLink Navigation in Angular?

routerLink navigates without reloading the page, and routerLinkActive adds a CSS class when the link matches the current URL. Together they replace href for all internal navigation.

RouterLink Navigation example

<a routerLink="/jobs">All internships</a>
<a [routerLink]="['/jobs', job.id]">{{ job.title }}</a>
<a [routerLink]="['/jobs']" [queryParams]="{ city: 'pune', page: 2 }">Pune</a>

<a routerLink="/jobs" routerLinkActive="active"
   [routerLinkActiveOptions]="{ exact: true }">Jobs</a>

Key points to remember

• Import RouterLink (and RouterLinkActive) into standalone components.
• The array form builds a path from segments, which is safer than string concatenation.
• Use exact: true on the home link so it is not active on every child route.

Common mistakes with RouterLink Navigation

• Using href for internal links, which reloads the whole application.
• Forgetting the RouterLink import, so the attribute is ignored silently.