ionic 4 router.navigate with navigationExtras does not overwrite queryParams in certain cases

Question

I have an inventory app (device and browser) where a user can keep an inventory of hobby parts. I have a dashboard which shows part categories (Parts Bins). If you click on the category, you see the parts within the category, then if you click on a part, you go to a part page.

TL:DR; at the bottom.

Dashboard -> Bins -> Part

I'm working with Router and navigationExtras to change the queryParams and I'm having some weird issues. I'm appending queryParams to the URL so a user can bookmark or copy/paste the URL if they're on a browser.

From the dashboard page, when I click on a bin, I get the bin's "category" and send that as a queryParam tot he bins page:

  goToBin(type) {
    const navigationExtras = {
      queryParams: {
        type: (type) ? type : 'all',
      }
    };
    console.log('Go To Bin:', type, navigationExtras);
    this.router.navigate(['dashboard/bins'], navigationExtras);
  }

This works just fine, when I get to the bins page, I receive the queryParams and make a quick call to my service to get the parts in an array that only pertain to that category:

  ionViewWillEnter() {
    this.route.queryParams.subscribe(params => {
      console.log('Received on Bin Page:', params);
      this.type = params['type'];
    });
    this.database.initDatabase(); // Only fires when loading this page fresh
    this.getBinParts();
  }

This works fine. Then on the same page, I'll send another queryParam with the part ID to the part page and basically do the same thing to the parts array:

Bins page - Sending queryParams to Parts Page

  goToPart(part) {
    const navigationExtras = {
      queryParams: {
        pid: part.id,
        fromBin: true,
      }
    };
    console.log('Go To Part', part, navigationExtras)
    this.router.navigate(['dashboard/part'], navigationExtras);
  }

Parts page, receiving the params from the bin (url)

  ionViewWillEnter() {
    this.route.queryParams.subscribe(params => {
      console.log('Received on Part Page:', params);
      this.pid = params['pid'];
      this.fromBin = params['fromBin'];
    });
    this.database.initDatabase(); // Again, only fires if fresh
    this.getPart();
  }

Then, going back to the bins page from parts:

  goBack() {
    const navigationExtras = {
      queryParams: {
        type: this.part.data.type,
      }
    };
    console.log('Go Back To Bins:', this.fromBin, this.part.data.type, navigationExtras);
    if (this.fromBin) {
      this.router.navigate(['/dashboard/bins'], navigationExtras);
    } else {
      this.router.navigate(['/dashboard']);
    }
  }

and going back to dashboard from bins (Notice I clear the queryParams here)

  goBack() {
    const navigationExtras = {}
    console.log('Go Back To Dashboard:', navigationExtras);
    this.router.navigate(['/dashboard'], navigationExtras);
  }

Everything works just fine if I ONLY start from the dashboard page. I load in to the appropriate bins and parts just fine.

TL;DR: The issue is when I start either directly on a bin page or a part page. If I go directly to a bin a page (for example /dashboard/bins?type=antenna) I can navigate normally to the dashboard and the correct parts pages, but if I navigate to the dashboard and select another bin, I only get the parts in the initial bin even though the query params in the URL have updated.

This happens if I go to the part page directly as well, but additionally, I can't see other parts if I go back to the parts page with a different ID.

I can see it's not picking up the new parameter I've sent via the console logs. In order, I'll see:

Go To Part {id: "85Xry68VpFN5BMfh9hGu", data: {…}} {queryParams: {…}}
Received on Part Page: {pid: "bHg19fRKW2YNXgzS2Umk", fromBin: "true"}

As you can see, I'm sending ID 85x... and receiving the previous ID bHg...

Is this queryParam being cached? and if so, how do I destroy it? Also, why is this only happening when I go directly to these child pages?