How to navigate to a child route by default - Angular 7 (Routes)

Question

I am using Angular routes, to navigate through the components. When a user is logged in they are navigated to dashboard/:id and then they see dashboard/123/projects etc. The problem is, when the user navigates to /dashboard only, I want to redirect them to /dashboard/:id by default. But when I do it like this : { path:"dashboard", redirectTo:"dashboard/:id/projects", pathMatch:"full"} it through an error saying :id not defined, and I am unable to navigate to from /dashboard to the current user logged in /dashboard/123/projects.

My Routes.modules.ts code

const routes: Routes = [{
    path: "",
    redirectTo: "/login",
    pathMatch: "full"
  },
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "register",
    component: RegisterComponent
  },
  //the problem goes here
  {
    path: "dashboard",
    redirectTo: "", //How to redirect to dashboard/:id ?
    pathMatch: "full"
  },
  {
    path: "dashboard/:id",
    component: DashboardComponent,
    children: [{
        path: "",
        redirectTo: "projects",
        pathMatch: "full"
      },
      {
        path: "projects",
        component: ProjectsComponent
      },
      {
        path: "archived",
        component: ArchivedProjectsComponent
      },
      {
        path: "projects/:id",
        component: SingleProjectComponent,
        children: [{
            path: "",
            redirectTo: "plans",
            pathMatch: "full"
          },
          {
            path: "plans",
            component: PlansComponent
          },
          {
            path: "tasks",
            component: TasksComponent
          },
          {
            path: "photos",
            component: PhotosComponent
          },
          {
            path: "files",
            component: FilesComponent
          },
          {
            path: "people",
            component: PeopleComponent
          },
          {
            path: "settings",
            component: SettingsComponent
          },
          {
            path: "trash",
            component: TrashComponent
          },
          {
            path: "**",
            redirectTo: "plans",
            pathMatch: "full"
          }
        ]
      },
      {
        path: "**",
        redirectTo: "projects",
        pathMatch: "full"
      }
    ]
  },
  {
    path: "**",
    component: PageNotFoundComponent
  },
];

score 3 · Accepted Answer · answered May 15 '19 at 12:21

3

You can achieve this with your Login component. Redirect user to the child route once they are successfully logged in.

Get the id of the user from the payload or from your API call depends on your structure, and pass it to the route.

this.router.navigate(['/dashboard/' + id + '/projects']);

this.router is an instance of Router.

answered May 15 '19 at 12:21

Maihan Nijat

9,054
11
62
110

So it means, It will be only possible programmatically, not using the configuration ? – Nadeem Ahmad May 15 '19 at 12:25
1

@NadeemAhmad What I understand is that `id` is not available in this context. – Maihan Nijat May 15 '19 at 12:26

score 1 · Answer 2 · answered May 15 '19 at 12:25

1

I think you will need to store the value of ":id" somewhere like in local storage inbetween requests, i.e.. store the last "id".

Provide an arbitary value in your redirect and then capture this in your DashboardComponent. Look for 9999 (or whatever) and instead replace the value from local storage.

  ngOnInit() {
localStorage.getItem('id'))
  }

{
    path: "dashboard",
    redirectTo: "dashboard/99999", //How to redirect to dashboard/:id ?
    pathMatch: "full"
  }

answered May 15 '19 at 12:25

Robin Webb

1,355
1
8
15

I got you, so it will be done using the code, in the Dashboard component, when the user is logged in. – Nadeem Ahmad May 15 '19 at 12:26
1

I think so if I understand your problem. Basically, you want to be able to redirect to the route with a parameter but user not providing it as only entering "/dashboard" so you'll need to get the previous route id from a previous request where they did provide a value for "id". If no value provided then you'll need to capture this too. Just an idea. Needto think about removing the id from local storage too (expiry if necessary). – Robin Webb May 15 '19 at 12:29
Perfect, I got you now ! – Nadeem Ahmad May 15 '19 at 12:30
1

Or just store the value in a variable in a service singleton. This way it will disappear when user exits from browser. Depends on your caching requirements I guess. Same principle applies though. You need to store that last id somewhere during session only or store more permanently, e.g. local storage. – Robin Webb May 15 '19 at 12:34
Ah...I didn't realise that "id" was your user ID. In which case you could get this from your JWT token or wherever else you are storing your user id. Same principal as above though in that you will need to persist the ID somewhere to be retrieved during the session post log in. Good luck! – Robin Webb May 16 '19 at 08:05

How to navigate to a child route by default - Angular 7 (Routes)

2 Answers2