Ionic5 : Can't retrieve data passed in url using the Extra State method

Question

I looked up a lot of posts to find a solution but it seems like no solution worked for me... I'm trying to pass data via url by using the "Extra State" method, but getting the error that says that it cannot read the property (probably because the retrieve function doesn't work so the variable isn't defined).

Page sending the data (practice-amount.page.ts):

    import { Router, NavigationExtras } from '@angular/router';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-practice-amount',
      templateUrl: './practice-amount.page.html',
      styleUrls: ['./practice-amount.page.scss'],
    })
    export class PracticeAmountPage implements OnInit {
    
      constructor(private router: Router) { }
    
      goToQuizz(amount: number){
        let navigationExtras: NavigationExtras = {
          state: {
            amountUrl: 50,
          }
        };
        this.router.navigate(['tabs/practicetab/practice-amount/quizzalpha', navigationExtras]);
      }
    
      ngOnInit() {
      }
    
    }

Page retrieving the data (quizzalpha.page.ts):

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    
    @Component({
      selector: 'app-quizzalpha',
      templateUrl: './quizzalpha.page.html',
      styleUrls: ['./quizzalpha.page.scss'],
    })
    export class QuizzalphaPage implements OnInit {
    
      amount: number;
    
      constructor(private route: ActivatedRoute, private router: Router) {
       
        this.route.queryParams.subscribe(params => {
          // if (this.router.getCurrentNavigation().extras.state) {
            this.amount = this.router.getCurrentNavigation().extras.state.amountUrl;
          // }
        });
    
       }
    
      
    
      ngOnInit() {
        
        console.log(this.amount);
    }
    
    }

I disabled the IF to see the error : Debug message

I'm starting to think that the error might be due to a weird routing because in all examples online they always had simple paths while mines are full of nested pages...

Answer 1

You passed your navigationExtras as part of the url try this instead:

        this.router.navigate(['tabs/practicetab/practice-amount/quizzalpha'],navigationExtras);