bug: <ion-router> push method does not remove url search parameters when setting Prop value

Bug Report

Version(s): Ionic: 5.0.7 Stencil: 1.12.4

Current behavior:

With this route defined:

<ion-route url="/item/:itemId" component="page-item" />

And this url: /items/1?name=value

• Navigating to the url with the browser results with an itemId value of: 1
• Navigating to the url via the router’s push method results with an itemId value of: 1?name=value

Expected behavior:

The itemId value should be 1 in both instances.

Other information:

Here’s what I’ve dug up so far:

When navigating via the browser, the pathname that thats comes from readPath is: /items/1

https://github.com/ionic-team/ionic/blob/master/core/src/components/router/utils/path.ts#L64-L76

export const readPath = (loc: Location, root: string, useHash: boolean): string[] | null => {
  let pathname = loc.pathname;
  if (useHash) {
    const hash = loc.hash;
    pathname = (hash[0] === '#')
      ? hash.slice(1)
      : '';
  }

  const prefix = parsePath(root);
  const path = parsePath(pathname);
  return removePrefix(prefix, path);
};

Which is the value used as the first parameter in this.writeNavStateRoot

https://github.com/ionic-team/ionic/blob/master/core/src/components/router/router.tsx#L156-L158

  private onRoutesChanged() {
    return this.writeNavStateRoot(this.getPath(), ROUTER_INTENT_NONE);
  }

---

Using the routers push method, the path starts as /items/1?name=value and remains that way:

https://github.com/ionic-team/ionic/blob/master/core/src/components/router/router.tsx#L85-L101

/**
 * Navigate to the specified URL.
 *
 * @param url The url to navigate to.
 * @param direction The direction of the animation. Defaults to `"forward"`.
 */
@Method()
push(url: string, direction: RouterDirection = 'forward') {
  if (url.startsWith('.')) {
    url = (new URL(url, window.location.href)).pathname;
  }
  console.debug('[ion-router] URL pushed -> updating nav', url, direction);

  const path = parsePath(url);
  this.setPath(path, direction);
  return this.writeNavStateRoot(path, direction);
}

I think you would need to include the search params for this.setPath so that they still get set in the address bar.

Then you would need to remove them for this.writeNavStateRoot so that they don’t get set on Prop value.

[ajmchambers]

Yeah great that seems to have fixed it

[ajmchambers]

No worries, here is a repo of the ionic-pwa starter that I’ve modified to show the issue: https://github.com/ajmchambers/ionic-router-example

Only changes are in the app-home component here: https://github.com/ajmchambers/ionic-router-example/blob/master/src/components/app-home/app-home.tsx#L31-L34

Click on the 4 profile page buttons/link at the bottom and compare the results of the displayed profile name.

Note: haven’t done any testing with hash routing yet - may behave differently

Thanks