As you probably already now in the latest @angular/router 3.0.0-rc.1
you are not allowed to user redirectTo
parameter if you also use the children
parameter.
But for sure in some cases this is something that you need like in my case. For example what I want is to redirect to first child all requests to the parent router.
Here's my router:
{
path: 'project/:id',
component: ProjectComponent,
children: [
{
path: 'properties',
component: ProjectPropertiesComponent
},
{
path: 'stats',
component: ProjectStatsComponent
}
]
}
I want everyone that goes to the project/:id
route to get redirected to the first child (properties
) in my case.
Is this possible somehow?
If I try like this:
{
path: 'project/:id',
component: ProjectComponent,
redirectTo: 'properties',
children: [
{
path: 'properties',
component: ProjectPropertiesComponent,
},
{
path: 'stats',
component: ProjectStatsComponent
}
]
}
I'm getting this error of course:
EXCEPTION: Error: Invalid configuration of route 'project/:id': redirectTo and children cannot be used together
pathMatch = 'prefix' tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path. pathMatch: 'full' means, that the whole URL path needs to match and is consumed by the route matching algorithm.
We use the wildcard path denoted by ** to catch any non existing routes and we use the redirectTo property to redirect them to the /404 path which maps to the not found component.
Default is "/" (the root path).
An empty child route should do the job:
{ path: 'project/:id', component: ProjectComponent, children: [ { path: '', redirectTo: 'properties', pathMatch: 'full' }, { path: 'properties', component: ProjectPropertiesComponent, }, { path: 'stats', component: ProjectStatsComponent } ] }
j2L4e answer is correct, but I was also forced to set the 'pathMatch' type as 'prefix' ..
pathMatch: 'prefix'
{
path: 'project/:id',
component: ProjectComponent,
children: [
{
path: '',
redirectTo: 'properties',
pathMatch: 'prefix'
},
{
path: 'properties',
component: ProjectPropertiesComponent,
},
{
path: 'stats',
component: ProjectStatsComponent
}
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With