Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use redirectTo if you using also children parameter, is this possible?

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

like image 206
Vassilis Pits Avatar asked Sep 02 '16 10:09

Vassilis Pits


People also ask

What is the use of pathMatch in Angular?

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.

Which is used to redirect to error component?

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.

What value for PATH will represent the default path for the application in Angular routing configuration?

Default is "/" (the root path).


2 Answers

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       }     ]   } 
like image 147
j2L4e Avatar answered Sep 26 '22 15:09

j2L4e


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
      }
    ]
  }
like image 39
walter Avatar answered Sep 26 '22 15:09

walter