Error when trying to navigate to Tabs page with a specific id

Ionic Framework
1

I’m working on an app that has the following use case which I’m not sure how to implement.

I’m on a page that display a list of Game/Match Results. When I click on that particular Game I want to be brought to a more detailed page for that Game, however this Detailed page is a tabs page (has 2 tabs on it).

Here’s the code in my List of Games page:

 <ion-card *ngFor="let match of matches; let i = index"  tappable routerLink="/../match-details/match-details-info/{{match.id}}"

Once I click on that ion-card I want to be brought to a page that has tabs - I imagine the URL should look something like /match-details/match-details-info/XYZ1234345 but I’m not sure how to get there.

Here is my match-details-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatchDetailsPage } from './match-details.page';

const routes: Routes = [
  {
    path: '',
    component: MatchDetailsPage,
    children: [

      {
        path: 'match-details-info/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-info/match-details-info.module#MatchDetailsInfoPageModule'
          }
        ]
      },
      {
        path: 'match-details-lineup/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-lineup/match-details-lineup.module#MatchDetailsLineupPageModule'
          }
        ]
      },
       {
        path: 'match-details-scorers/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-scorers/match-details-scorers.module#MatchDetailsScorersPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/match-details/match-details-info',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/match-details/match-details-info',
    pathMatch: 'full'
  } 
];

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

Here is the error I’m seeing

Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW'
Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW'

The url looks correct to me but for some reason it can not match the route.

Also including part of the app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './services/user/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'match-details/:id', loadChildren: './pages/match-details/match-details.module#MatchDetailsPageModule' },
  { path: 'player-details/:id', loadChildren: './pages/player-details/player-details.module#PlayerDetailsPageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  //{ path: 'admin-home-tabs, loadChildren: './pages/admin-home-tabs/admin-home-tabs.module#AdminHomeTabsPageModule' },
  { path: 'reset-password', loadChildren: './pages/reset-password/reset-password.module#ResetPasswordPageModule' },

Would love some help with this. Thanks

2

the routerLink looks off to me.

[routerLink]="['match-details', 'match-details-info', match.id]"

Or something like that. Really the way you had routerLink, you should not be doing that. Use proper property binding.

3

Changing RouterLink causes the issue
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/fixtures/match-details/match-details-info/inhOKexG3AtcJNnj0xyW’
Error: Cannot match any routes. URL Segment: ‘tabs/fixtures/match-details/match-details-info/inhOKexG3AtcJNnj0xyW’

I’m trying to move away from the tabs/fixtures page and move to a new tabbed page match-details/match-details-info/XYZ12345

Thanks for the improvement though - I’ll update the other RouterLink references.

4

if you need more help, provide a more detailed demo. We can always take a look then

1 Like
5

I’ve created a git project which has a subset of my code. When you run the ionic project (running as ionic 5) you’ll first be presented with a list of game fixtures on ionic cards. If you hover over these cards you’ll see a url in the bottom left hand corner which appears as how I expect but when I click on any of the fixtures I get the error:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘match-details/match-details-info/R08fri6pW5JroAgJbVUh’
Error: Cannot match any routes. URL Segment: ‘match-details/match-details-info/R08fri6pW5JroAgJbVUh’
at ApplyRedirects.noMatchError (router.js:4295)

What I would expect is that I’m brought to another tabs page
Here’s the url to my github project https://github.com/barrystevenson/BallincolligRFCv2.

6

Honestly, your setup is very confusing and doesn’t make a lot of sense.
From the looks of it, you want to have 2 top level tabs, one at tabs/ and one at match-details.
This is something that should be avoided as it messes with a users expectations of consistent navigation.

As for the actual structure, you should absolutely not be putting tabs inside of ion-content. It should be the root DOM structure. How you currently have it setup is wrong.

Honestly, there’s just a lot in here that I had to change, so here’s a diff.

7

Thanks Mike

You seem to have got to the bottom of my issue and it makes sense now! Can’t thank you enough.
Apologies for the code - as i said I’m relatively new to the game.

Regards,
Barry