角4子路由

Question

Im trying to write routing for childs. The problem Im having is with path not beeing inserted in url bar of thhe browser properly. Below the code.

router.module

const routes: Routes = [

  {path: 'menu', component: MenuComponent, canActivate: [AuthGuard],
    children: [
      { path: 'upload', component: DrawingUploadComponent },
      { path: 'account', component: AccountComponent },
      { path: 'projects', component: ProjectListComponent }
    ]}
];

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

export class MenuRoutingModule {}

menu.component

<nav>
  <a routerLink="/projects" routerLinkActive="active">Projects</a>
  <a routerLink="/upload" routerLinkActive="active">Upload</a>
  <a routerLink="/account" routerLinkActive="active">Account</a>
</nav>
MENU COMPONENT
<router-outlet></router-outlet>

the parent component:

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegistrationComponent},
  {path: "", redirectTo: "login", pathMatch: "full"},
  {path: 'menu', component: MenuComponent, canActivate: [AuthGuard]}
];

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

export class AppRoutingModule {
}

So the problem is when im under "/menu" the menu component is displayed, now when Im clicking on any link eg

<a routerLink="/upload" routerLinkActive="active">Upload</a>

im getting console error Cannot match any routes. URL Segment: 'upload' Error: Cannot match any routes. URL Segment: 'upload'

but when i'd type the route by hand in browser bar "/menu/upload" I'm getting the proper result

Answer 1

When your route starts with / , that refers to the root of your app. You'll need to remove that, or else use the full path eg routerLink="/menu/upload" .