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

[ajmchambers]

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.

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[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

[liamdebeasi]

Thanks for the follow up. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[ajmchambers]

Yeah great that seems to have fixed it

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21071, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.