CODEWITHSUNDEEP
routesnavigationionic4
Anthony PALERMO
Anthony PALERMO

Reputation: 149

IONIC 4 - Routing Navigation

Good morning dear all,

I'm a beginner with Ionic and I encountered some problems with routing. As my title is displaying, I encountered some difficulties to make works my navigation in my subfolder.

Does somebody can help me to clarify where I was mistaken.

My tabs pages have also a routing to navigate to dashboard and it's working. But when I reuse the code in my Dashboard pages to navigate to [barcode - report - transaction - help], it doesn't work

enter image description here

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardPage } from './dashboard.page';

const routes: Routes = [

{
  path: 'dashboard',
    component: DashboardPage,
    children: [
  {  path: 'barcode', loadChildren: 'barcode/barcode.module#BarcodePageModule' },
  {  path: 'transaction',  loadChildren: 'transaction/transaction.module#TransactionPageModule' },
  {  path: 'report',  loadChildren: 'report/report.module#ReportPageModule'  },
  {  path: 'help', loadChildren: 'help/help.module#HelpPageModule' },  
    ]
  },
  { path: '', redirectTo: '/tabs/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardPageRoutingModule {}

<!-- START CONTENT -->
<ion-content class="dashboardContent">
    <ion-grid>
      <ion-row >
        <ion-col>
          <div><ion-button routerLink="/barcode"  class="dashboardBtn" color="primary">Barcode Scan</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button routerLink="/transaction" class="dashboardBtn" color="primary">Add Transaction</ion-button></div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div><ion-button  routerLink="/report" class="dashboardBtn" color="primary">Report</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button  routerLink="/help" class="dashboardBtn" color="primary">Help</ion-button></div>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>
 <!-- END CONTENT -->

And my error is : Cannot match any routes. URL Segment: 'tabs/dashboard/barcode'

Thanks per advance !

Upvotes: 0

Views: 362

Answers (3)

Chris
Chris

Reputation: 824

For the second question ,if you need to access to your others pages inside help , you need to declare path in app-routing.module.ts

` 

 { path: 'report', loadChildren: './report/report.module#ReportPageModule' },

then do a method inside your help page

goToReport () { this.router.navigateByUrl('reportPage'); }

Upvotes: 2

Anthony PALERMO
Anthony PALERMO

Reputation: 149

thank you for your explanations and links. I would like to access to my others pages with these button:

enter image description here

Can I use tab also, or others solutions ???

Upvotes: 0

Mihir Patel
Mihir Patel

Reputation: 416

Solution 1 & my preferable) You can use the Segments instead of tabs. here is the link Segment reference

Solution 2 as per your current code) You can have this reference for the tab. use ion-tab instead of ion-button.

Please follow the link Tabs reference

Upvotes: 2

Related Questions