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:
by not starting navigation with '/' the router thinks your'e trying to navigate relatively to the current route, which isn't the case.
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}
]);