bug: <ion-router> push method does not remove url search parameters when setting Prop value #21062
Description
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.