Exploring the world of routing in Angular 8 has been an interesting journey. Currently, I am faced with a challenge of creating a nested router that involves using children routes. Strangely, while the first route functions as expected, the second one seems to have issues where the URL changes correctly but the page does not update.
const routes: Routes = [
{
path: "",
component: Component
},
{
path: "things",
component: Component1
},
{
path: "partA/:id",
component: Component2,
children: [
{
path: 'partB/:id',
component: Component3
}]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes), RouterModule.forChild(routes)],
exports: [RouterModule]
})
Within Component1.ts (which is functioning properly), the navigation code looks like this:
this.router.navigate(["partA" + item['name']], {state: {data: item}})
However, when it comes to Component2.ts:
this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})
The browser's URL reflects the correct path without any errors thrown, yet the page stubbornly remains on Component2 without updating. Even after including
<router-outlet></router-outlet>Additional attempts with similar routing setups led to the same dilemma:
{
path: "house/character/:id",
component: InfoCharacterComponent
},