My routing setup is structured as follows:
Main App-routing module
const routes: Routes = [
{
path: '',
redirectTo: environment.devRedirect,
pathMatch: 'full',
canActivate: [AuthenticationGuard]
},
{
path: 'customers/:customerId/contracts/:contractId',
loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
canActivate: [AuthenticationGuard],
}
];
I also have a child component with its own set of routes:
const routes: Routes = [
{
path: 'create',
component: CreateEditComponent,
data: { animation: 'create' },
canActivate: [ AuthenticationGuard ]
},
{
path: ':groupId/edit',
component: CreateEditComponent,
data: { animation: 'edit' },
canActivate: [ AuthenticationGuard ]
},
{
path: '',
component: OverviewComponent,
data: { animation: 'overview' },
canActivate: [ AuthenticationGuard ]
}
];
In addition, there is a top level navbar component in the app.component.html.
Both the navbar component and the CreateEditComponent contain a function that is triggered by a button click event. The function looks like this:
goToOverview(): void {
this._router.navigate(['customers/:customerId/contracts/:contractId']);
}
Although both components appear to be using the same paths, when I debug the router object, the results are different. The navbar function navigates correctly, but the CreateEditComponent adds a '?', then reloads the page. I'm puzzled as to why these seemingly identical calls produce different outcomes even though their activatedRoute objects are the same.