CODEWITHSUNDEEP
angularroutesangular-ui-routerrouterlink
Matelutex
Matelutex

Reputation: 2210

Angular 8 - child routerLink doesn't work

I want to navigate from one page to another, from one component to another:

const routes: Routes = [
  {
    path: '',
    component: UploadPageComponent,
    children: [
      {
        path: 'frameworks',
        component: FrameworksSceneComponent,
        pathMatch: 'full',
        children: [
          {//doesn't work
            path: 'questionnaire',
            component: QuestionnaireComponent,
          },
        ],
      },
      {
        path: 'documents',
        component: DocumentsSceneComponent,
        pathMatch: 'full',
      },
      {//works
        path: 'questionnaire',
        component: QuestionnaireComponent,
        pathMatch: 'full',
      },
    ],
  },
];

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

My template (FrameworksSceneComponent):

 <a [routerLink]="['questionnaire']">aaaaaaaaaaaaaaaaaaaa</a>

but this works (FrameworksSceneComponent):

<a [routerLink]="['/private/upload/questionnaire']">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a>

What's wrong with my nested links? WHy after clicking on aaaaaaaaaaaaaaaaaa I'm redirected to my main page. ON the other hand link bbbbbbbbbbbbbbbb works, but in thus case the link is not a child link.

Upvotes: 0

Views: 953

Answers (1)

Hansaka Sandaruwan
Hansaka Sandaruwan

Reputation: 521

The way you implemented the nested route, angular looking for a <router-outlet> in your FrameworksSceneComponent.html. try implementing like below. not sure why its navigate to the main page.

  routes: Routes = [
    {
      path: "",
      children: [
        {
          path: "",
          component: UploadPageComponent
        },
        {
          path: "frameworks",
          children: [
            {
              path: "",
              component: FrameworksSceneComponent,
              pathMatch: "full"
            },
            {
              //should  work
              path: "questionnaire",
              component: QuestionnaireComponent
            }
          ]
        },
        {
          path: "documents",
          component: DocumentsSceneComponent,
          pathMatch: "full"
        },
        {
          //works
          path: "questionnaire",
          component: QuestionnaireComponent,
          pathMatch: "full"
        }
      ]
    }
  ];

Upvotes: 1

Related Questions