Reputation: 852
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'?
Upvotes: 4
Views: 775
Reputation: 824
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.
Upvotes: 0
Reputation: 387
you should use / before router name this._Router.navigate(['/Home']);
see another example at Routing through links in Angular2
Upvotes: 0
Reputation: 5936
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.
Upvotes: 3