How to navigate to root of a children in Angular2 router?

Question

I have the following router in my App.ts:

@RouteConfig([
    {path: '/', redirectTo: ['Login']},
    {path: '/login', name: 'Login', component: LoginComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/users/...', name:'Users', component: UsersComponent}
])

And in my UsersComponent I have defined its children:

@RouteConfig([
    {path: '/addUser', name: 'Add User', component: UserAddComponent},
    {path: '/editUser', name: 'Edit User', component: UserEditComponent}
])

My question is: when I am trying to navigate to JUST /users/ , I have the following error:

EXCEPTION: Link "["Users"]" does not resolve to a terminal instruction. in [['Users'] in NavigationComponent@5:20]

How can I access just users state (the html defined in UsersComponent)?

Answer 1

You should make new component that just handles routing UserRoute and use that in App:

@RouteConfig([
    {path: '/', redirectTo: ['Login']},
    {path: '/login', name: 'Login', component: LoginComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/users/...', name:'Users', component: UsersRoute}
])

// users-route.ts
@RouteConfig([
    {path: '/', name: 'UsersRoot', component: UsersComponent, useAsDefault: true},
    {path: '/addUser', name: 'Add User', component: UserAddComponent},
    {path: '/editUser', name: 'Edit User', component: UserEditComponent}
])

You can name root route for users whatever you want, because of the useAsDefault option ['/Users'] route will terminate at UsersRoot .

Answer 2

您需要在“ Users ”的子路由之一中设置useAsDefault: true ，或直接在链接中指定子路由

[routerLink]="['/Users', `Add User']"