Page reloading on child routing

Question

Using Angular 2 Router. I have a 2 level routing (root routing and child routing]

My problem is that when navigating to a child route the page is reloading after the Child is being loaded.

child level routing

const childRoutes: Routes = [
   {
    path: '',
    component: BaseComponent,
    children: [
           {
            path: '',
            component: DetailsComponent
           },
           {
               path: 'other',
               component: OtherComponent
           }
       ]
   }
];

export const childRouting = RouterModule.forChild(childRoutes);

Top Level Routing

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/overview',
        pathMatch: 'full'},
    {
        path: 'overview',
        component: OverviewComponent},
    {
        path: 'sub',
        //This is the module which the childRoutes belongs to.
        loadChildren: 'app/components/sub.module#SubModule'
    }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

call for navigation from DetailsComponent

export class DetailsComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() { }

    onSubmit() {
        this.router.navigate(['/sub/other'])
    }
}

p.s

I'm trying to keep this question short so if more code needed then please let me know and i will gladly add it.

Answer 1

It's caused by the default browser submit behavior. Either call preventDefault(), return false in the event handler or add type="button" to prevent the submit event default behavior.