Angular Routing is not navigating to child route

Question

I have a Menu Component, from where I am trying to navigate and load the contents of my child route - AboutComponent, which is not working. Below is my code, please help:

The URL show the proper route, there is no error in console. But the about component does not load

app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

menu.component.html:

<div class="row menustyle" *ngIf="isMenuClicked">
 <div class="col24" style="padding: 0 20px">
   <ul class="nav navba-nav">
     <li>
        <a *ngFor="let data of navPathData" routerLinkActive="active" 
          routerLink="data.value"
          (click)="goto(data.value)">{{ data.text }}</a>
     </li>
   </ul>
 </div>
</div>

menu.component.ts:

constructor:

 constructor(private readonly route: ActivatedRoute,
private readonly router: Router, private dataService: DataServiceService) { }

method: public goto(value: string): void { //this.router.navigate();

this.router.navigate([value], { relativeTo: this.route });

}

app-routing.modulets:

import { MenuComponent } from './menu/menu.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './content/about/about.component';

const routes: Routes = [
 { path: '', redirectTo: '/menu', pathMatch: 'full' },
 {
   path: 'menu', component: MenuComponent, children:
    [
     { path: ':id', component: AboutComponent }
    ]
 }
 ];

@NgModule({
imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

my solution is

 { path: '', redirectTo: '/menu', pathMatch: 'full' },
 {
   path: 'menu', children:
    [
     { path: '', component: MenuComponent }
     { path: ':id', component: AboutComponent }
    ]
 }
 ];

Answer 2

As you are binding the routerlink to a variable you need to wrap the routerlink with square-brackets

[routerLink]="data.value"

Depending on the setup of your routes, you may also be specifying the relative route incorrectly, you could try ['./'+data.value] or ['/'+data.value]

If this is still not working you can get additional router debugging info by enabling tracing

RouterModule.forRoot(
      ...,
      { enableTracing: true }
    )