When trying to navigate from 'users' to 'users/:id' like this

this.router.navigate([`/users/${userId}`]);

or

this.router.navigate(['/users', userId]);

it stays on 'users' but url in browser bar changes to 'users/{correct_id}'

Application structure:

• dashboard (/)
• login (/login)
• users (/users)
  • users/id (/users:id)

I suspect the problem lies in my routes but unfortunately I can't find it.

app-routing.module.ts:

const routes: Routes = [
{
    path: '',
    component: DashboardComponent,
    loadChildren: (): Promise<DashboardModule> =>
        import('./dashboard/dashboard.module').then(
            (m: typeof import('./dashboard/dashboard.module')): DashboardModule => m.DashboardModule
        )
},
{
    path: 'login',
    component: LoginComponent,
    loadChildren: (): Promise<LoginModule> =>
        import('./login/login.module').then(
            (m: typeof import('./login/login.module')): LoginModule => m.LoginModule
        )
},
{
    path: 'users',
    component: UsersComponent,
    loadChildren: (): Promise<LoginModule> =>
        import('./users/users.module').then(
            (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
        )
},
{
    path: '**',
    redirectTo: ''
}

];

users-routing.module.ts:

const routes: Routes = [
{
    path: '',
    component: UsersComponent,
},
{
    path: ':id',
    component: UserProfileComponent,
},

];

CodePudding user response：

The problem is probably in the following route:

{
  path: 'users',
  component: UsersComponent, // <-- HERE
  loadChildren: (): Promise<LoginModule> =>
    import('./users/users.module').then(
      (m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

When you assign a component to a route, when that route matches, this component will always get rendered. And if it has children, they will get rendered in the <router-outlet> of that UserComponent template.

Since you also have the UserComponent assign to the children root path, I guess that's not the case.

To solve it you just need to remove the component line from the 'users' route.

{
  path: 'users',
  loadChildren: (): Promise<LoginModule> =>
    import('./users/users.module').then(
      (m: typeof import('./users/users.module')): UsersModule => m.UsersModule)
},

Cheers

CodePudding user response：

You should remove component setting in routes array.

const routes: Routes = [
    ...
    {
        path: 'users',
        // component: UsersComponent,                << remove this line
        loadChildren: (): Promise<LoginModule> =>
            import('./users/users.module').then(
                (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
            )
    },
    ...
];

CodePudding user response：

There are two problems,

1st - You have used lazy loading feature so, you don't need to load component in main route

{
    path: 'users',
    component: UsersComponent, // <-- REMOVE it
    loadChildren: (): Promise<LoginModule> =>
        import('./users/users.module').then(
            (m: typeof import('./users/users.module')): UsersModule => m.UsersModule
        )
},

2nd - Then you also need to change in user module route like,

users-routing.module.ts:

const routes: Routes = [{
  path: '',
  children: [{
    path: '',
    component: UsersComponent,
  }, {
    path: ':id',
    component: UserProfileComponent
  }]
}];

Hope you are clear with this solution

CodePudding user response：

in your first attempt,

this.router.navigate([`${userId}`]);

you are trying to route based on a relative path, yet you don't provide the relativeTo property which is needed to route relative to the current path.

in your second attempt,

this.router.navigate([`${users/userId}`]);

you have few issues:

1. by not starting navigation with '/' the router thinks your'e trying to navigate relatively to the current route, which isn't the case.

2. your route string template is wrong (your'e trying to use variable users/userId which is clearly not what you meant), you should change it to:

   this.router.navigate(['/users', ${userId}]);