I have a routing file written as below

  {
    path: "student",
    component: StudentComponent,
    canActivate: [authenticationGuard],
    data: {
        role: "student",
      },
    children: [
      {
        path: "information",
        component: InformationComponent,
        data: {
          name: "Information",
        }
      },
      {
        path: "submission",
        component: SubmissionComponent,
        data: {
          name: "Submission",
        }
      },
      {
        path: "seminar-invitation",
        component: SeminarInvitationComponent,
        data: {
          name: 'Seminar',
        }
      },
    ],
  }

and in an html file

      <mat-nav-list>
        @for (item of routes(); track item) {
        <a mat-list-item [routerLink]="[item.path]" [routerLinkActive]="['router-is-active']" class="block">{{
          item.data.name }}</a>
        }
      </mat-nav-list>

I am trying to create blocks of options which direct users to the desired page, I cant seem to get there. Everytime a block is clicked, the url says http://localhost:3000/information (for example), instead of http://localhost:3000/student/information.

I have tried using [routerLinkActiveOptions]=”{exact: true}” but the error still exists. Can someone enlight me on this? I am using Angular 17 and I want the site to take me to /student/information. Thanks in advance.