routerLink not navigating as expected

I have the following routes

import { Routes } from '@angular/router';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { TeamsComponent } from './pages/teams/teams.component';
import { LoginComponent } from './pages/login/login.component';
import { BaseLayoutComponent } from './base-layout/base-layout.component';

export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '',
component: BaseLayoutComponent,
children: [
{ path: '', component: DashboardComponent, pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'teams', component: TeamsComponent }
]
},

{ path: '**', redirectTo: 'dashboard' }
];


I have the following routerLink, which is part of my side menu navigation

<a routerLink="/teams" routerLinkActive="active">Teams</a>


further down the page I have the following

<main class="py-10">
<div class="px-4 smx-6 lgx-8">
<router-outlet />
</div>
</main>


When trying to click on Teams, it doesn't appear clickable, when adding a (click)="teamsClicked()" I can write to the console, so I'm not sure what I'm doing here but it seems the router isn't working as expected, can anyone spot any issue here?

BaseLayoutComponent

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
selector: 'app-base-layout',
imports: [RouterOutlet],
templateUrl: './base-layout.component.html',
styleUrl: './base-layout.component.css'
})
export class BaseLayoutComponent {


onClick() {
console.log('Team link clicked');
}

}

Continue reading...