Not able to navigate to a route which has a redirectTo specified in Angular2 by name

Question

My RouteConfig has the following paths defined

@RouteConfig ([
    { path:'/main',name:'Home',redirectTo: ['Setup']},
    { path:'/setup',name:'Setup',component:SetupComponent},
    { path:'/configuration',name:'Configuration',component:ConfigurationComponent},
])

In the template I have

    <ol>
        <li><a [routerLink]="['Setup']">Setup</a></li>
        <li><a [routerLink]="['Configuration']">Configuration</a></li>
        <li><a [routerLink]="['Home']">Home</a></li>                
    </ol>

In the component, in a method I have tried

this._Router.navigate(['Home']);

In both cases, (Using routerLink directive and Router.navigate method) when trying to navigate to 'Home' route, I am getting the following error.

Component "AppComponent" has no route named "Home"

Whereas both the routes which has a component associated to them are working as expected. The same is the behavior when they are invoked from Children routers.

How can I route/navigate to the route defined by the name 'Home'?

Answer 1

You can't assign a name to a redirect route. Since Home redirects to the route named Setup, I'd use the Setup name instead.

Answer 2

you should use / before router name this._Router.navigate(['/Home']);

see another example at Routing through links in Angular2

Answer 3

In your example code you have the home/main route object which is:

{
   path:'/main',
   name:'Home',
   redirectTo: ['Setup']
},

You need to route to the path - /main and not name - Home. So your html should be:

<ol>
   <li><a [routerLink]="'/setup'">Setup</a></li>
   <li><a [routerLink]="'/configuration'">Configuration</a></li>
   <li><a [routerLink]="'/main'">Home</a></li>
</ol>

Your TypeScript should be

this._Router.navigate(['/main']);

Also I don't see a name property in the route interface so do consider removing it.

Hope it helps.