Router Link only works once

@tiagosilveira wrote:

I’m using Ionic 4 and have a page that will show the user data, as name, address and etc… I’m trying to access this page clicking on an avatar that is on my header component (Custom component)

1. It works in the First click, right after the app starts, but if I go back to the home route and Try to access the page again, the router link poits to other page that is the tabs page.

2. If I try to acess this link on the header from other routes inside the tab, he throws me the error that cannot match any routes

Considerations: I’m using 3 routes module, app-routing.module(Here I have an CanActivate method…), private-routing.module and tabs-routes.module

Here’s the files

app-routing.module:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { GuardaautenticacaoService } from './services/guardaautenticacao.service';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },

  {
    path: 'private',
    canActivate: [GuardaautenticacaoService],
    loadChildren: './private/private-routing.module#PrivateRoutingModule'
  }

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

private-routing.module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }

];
console.log(routes)
@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class PrivateRoutingModule { }

tabs-router.module

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


const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            loadChildren: '../home/home.module#HomePageModule'
          }
        ]
      },
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home/home.module#HomePageModule'
          }
        ]
      },
      {
        path: 'tarefas',
        children: [
          {
            path: '',
            loadChildren: '../tarefas/tarefas.module#TarefasPageModule'
          }
        ]
      },
      {
        path: 'cadastros',
        children: [
          {
            path: '',
            loadChildren: '../cadastros/cadastros.module#CadastrosPageModule'
          }
        ]
      },
      {
        path: 'relatorios',
        children: [
          {
            path: '',
            loadChildren: '../relatorios/relatorios.module#RelatoriosPageModule'
          }
        ]
      },
      {

        path: 'usuario-detalhe',
        children: [
          {
            path: '',
            loadChildren: '../sharedmodule/usuario-detalhe/usuario-detalhe.module#UsuarioDetalhePageModule'
          }
        ]

      },
    ]
  },
  {
    path: '',
    redirectTo: './private/tabs/home',
    pathMatch: 'full'
  }
];

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

Header component that has the trigger o change the route to usuario-detalhe, this is a custom component…

    <ion-header>
      <ion-toolbar>
        <ion-item lines="none" *ngIf="usuario !=null">
          <a [routerLink]="['usuario-detalhe']">
            <ion-avatar slot="start">
              <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/3e/3eb6c8bae0aa5dbb209912a4b2d0bd3c535134be.jpg">
        </ion-avatar>
      </a>
      <ion-label>
        <h3>{{usuario.nome_usuario}}</h3>
        <ion-text class="grey"><small color>{{usuario.nome_cargo}}</small></ion-text>
      </ion-label>
      <a>
        <ion-button (click)="logout()" fill="clear">
          <ion-icon name="log-out"></ion-icon>
        </ion-button>
      </a>
    </ion-item>
  </ion-toolbar>
</ion-header>

I think this gif can help to understand

How Could I Solve that?

Posts: 1

Participants: 1

Read full topic