离子4（角形） <ion-router-outlet> 不能正常工作

Question

I am trying to make ionic 4 routing work , This is my home component:

<ion-header>
  <ion-toolbar color="primary" class="animated fadeIn">
    <ion-buttons slot="start">
      <ion-menu-button color="secondary"></ion-menu-button>
      <ion-back-button>Back</ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding class="animated fadeIn login auth-page">
  <ion-router-outlet main></ion-router-outlet>
</ion-content>

Those are navbars html file:

<ion-menu-toggle auto-hide="false" *ngFor="let p of driverNavBarComponents">
    <ion-item [routerDirection]="p.direction" [routerLink]="[p.url]" color="primary">
      <ion-icon slot="start" [name]="p.icon"></ion-icon>
      <ion-label>
        {{p.title}}
      </ion-label>
    </ion-item>
</ion-menu-toggle>

and this is the driverNavBarComponent inside ts file:

public driverNavBarComponents = [
    {
      title: 'Home',
      url: '/driver/cabinet',
      icon:'home',
      direction:'root',
    },
    {
      title: 'Profile',
      url: '/driver/cabinet/profile',
      icon:'contact',
      direction:'forward',
    }
  ]; 

When I go from /driver/cabinet to /driver/cabinet/profile no back button is shown. Also when I return to home from navbar, route changes in url, but I still see profile page. so what am I doing wrong?

That's how my router module looks like:

RouterModule.forChild([
      { 
        path: 'driver/cabinet', 
        component: DriverHomeComponent ,
        children:[
          {
            path: 'profile',
            component: DriverProfileComponent
          },
          {
            path: 'tracking',
            component: DriverTrackingComponent
          }
        ]
      }
    ]),

Answer 1

ion-router-outlet does not belong in the ion-content.

It's a top level component that is not supposed to be a child element.

Please see the starter projects.