后退按钮返回登录页面，而不是角度4中的主页

Question

I am facing weird problem with back button press on browser, I have login page when i click on login page it goes to home page..

In the home page i have menu options like reports and sales when i click on reports page it goes to reports page.

My problem is when i click on browser back button on reports page it goes to login page instead of home page

URL for Home page : /localhost:4200/home

URL for reports Page : /localhost:4200/home/monthlyreport/my

and i have written code for browser back button below

import { PlatformLocation, Location } from '@angular/common'

constructor(private location: PlatformLocation, private loc: Location) {

      location.onPopState(() => {
       //window.history.back();
        this.loc.back(); // tried with this one but no result
     });
}

Could any one please help on this how to back to previous page using angular 4 Many thanks in advance..

updated login action method

   const routes: Routes = [
  {
    path: "",
    redirectTo: "login",
    pathMatch: "full"
  },
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "error/:errorId",
    component: ErrorComponent
  },
  {
    path: "logout",
    component: LogoutComponent
  },
  {
    path: "home",
    data: {
      breadcrumb: "Home"
    },
    component: HomeComponent,
   }
   children: [
     {
        path: "monthlyreport/:type",
        data: {
          breadcrumb: "Reports"
        },
        component: MonthlyReportComponent,
        canActivate: [AuthGuardService]
      }
    ]
 ];

Answer 1

I believe you should rewrite your code as the following:

  {
    path: "home",
    data: {
      breadcrumb: "Home"
    },
    component: HomeComponent,
    children: [
          {
            path: "monthlyreport/:type",
            data: {
              breadcrumb: "Reports"
            },
            component: MonthlyReportComponent,
            canActivate: [AuthGuardService]
          }
        ]
   }

 ];

Which will bring the structure of the object in line with the example used in the Angular documentation here

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];