How to fix ionic/angular routes to different pages?

Ionic Framework
1

I’ve been working on an ionic app and I have a split panel lane that has links to many different pages in the dashboard. after login page its dashboard/home and theres also dashboard/messages and so forth and so on. In the url tag I can navigate to each page but when I click on a link in the split panel lane it goes back to the current page whether it is dashboard/messages or dashboard/home. In my code, the links are linked to differents routes for the app navigation but on serve, all links link to the current route. So if I am in the home page, an a tag that is routed to a messages route in the code load back to the home page even though in the code I never told it to do so.

dashboard

<ion-split-pane>
  <ion-menu contentId="content" menuId="main">
 <div class="header" [routerLink]="">
 <div class="img">
   <img src="https://timedotcom.files.wordpress.com/2019/04/katiebouman.jpg"/>
 </div>
 <div class="name">
   <p>Georges Tchianga</p>
 </div>
 <div class="arrow">
  <ion-icon name="arrow-forward"></ion-icon>
 </div>
 </div>
 <ion-content>
   <ion-list>
     <ion-menu-toggle auto-hide="false">
       <div class="menu_nav">
         <ul>
           <li><a [routerLink]='home'>Home</a></li>
           <li><a [routerLink]='messages'>Messages</a></li>
            <li><a [routerLink]='Payments'>Payments</a></li>
             <li><a [routerLink]='posted'>Posted Jobs</a></li>
         </ul>
       </div>
     </ion-menu-toggle>
   </ion-list>
 </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main>
  </ion-router-outlet>
</ion-split-pane>

home

<ion-toolbar>
    <ion-searchbar ></ion-searchbar>
  </ion-toolbar>


<ion-content padding>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="light">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
</ion-content>

##app routing module

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import { DashboardPage } from './dashboard/dashboard.page';
 import {HomePage } from './dashboardComponents/home/home.page'
import {MessagesPage } from './dashboardComponents/messages/messages.page'
import {PaymentsPage } from './dashboardComponents/payments/payments.page'
 import {PostedJPage } from './dashboardComponents/posted-j/posted-j.page'
 import {ProfileEditPage } from './dashboardComponents/profile-edit/profile-edit.page'
 import {PostPage } from './dashboardComponents/post/post.page'
const routes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
 { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
 { path:'dashboard', redirectTo:'dashboard/home', pathMatch: 'full' },
 { path:'dashboard', component: DashboardPage,
  children: [
  { path: 'messages', component:MessagesPage , pathMatch:'full'},
 { path: 'home', component: HomePage , pathMatch:'full'},
 { path: 'payments', component:PaymentsPage , pathMatch:'full'},
{ path: 'posted', component:PostedJPage , pathMatch:'full'},
  { path: 'post', component:PostPage , pathMatch:'full'}
]
  },
  { path: 'post', loadChildren: './dashboardComponents/post/post.module#PostPageModule' }
  ]  ;

 @NgModule({
    imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
   ],
   exports: [RouterModule]
   })
  export class AppRoutingModule { }
  export const components = [
  HomePage,
  MessagesPage,
  PaymentsPage,
  PostedJPage,
  ProfileEditPage,
  DashboardPage
  PostPage
  ]

Just like the home page, I have many other pages. as you can see above, In the dashboard split panel, I have links that goes to different routes but when I run the run, they all change and links to the current page that I am in. Weirdess thing I’ve seen lately