From eab33732133bd43ca6788bba6e93a9b545ee058a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 30 Apr 2020 16:02:21 -0400 Subject: [PATCH] fix(router): account for query string when pushing page (#21071) --- core/src/components/router/router.tsx | 7 ++++--- core/src/components/router/test/parser.spec.tsx | 5 ++++- core/src/components/router/test/path.spec.tsx | 12 ++++++++++++ core/src/components/router/utils/path.ts | 8 ++++++-- 4 files changed, 26 insertions(+), 6 deletions(-) diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index f458ac0cfb..7927829636 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -99,7 +99,8 @@ export class Router implements ComponentInterface { console.debug('[ion-router] URL pushed -> updating nav', url, direction); const path = parsePath(url); - this.setPath(path, direction); + const queryString = url.split('?')[1]; + this.setPath(path, direction, queryString); return this.writeNavStateRoot(path, direction); } @@ -267,9 +268,9 @@ export class Router implements ComponentInterface { return changed; } - private setPath(path: string[], direction: RouterDirection) { + private setPath(path: string[], direction: RouterDirection, queryString?: string) { this.state++; - writePath(window.history, this.root, this.useHash, path, direction, this.state); + writePath(window.history, this.root, this.useHash, path, direction, this.state, queryString); } private getPath(): string[] | null { diff --git a/core/src/components/router/test/parser.spec.tsx b/core/src/components/router/test/parser.spec.tsx index b2909dd9ac..c067f9dc86 100644 --- a/core/src/components/router/test/parser.spec.tsx +++ b/core/src/components/router/test/parser.spec.tsx @@ -14,10 +14,12 @@ describe('parser', () => { const r4 = mockRouteElement(win, '/5/hola', '4'); const r5 = mockRouteElement(win, '/path/to/five', '5'); const r6 = mockRouteElement(win, '/path/to/five2', '6'); + const r7 = mockRouteElement(win, '/path?flag=true', '6'); root.appendChild(r1); root.appendChild(r2); root.appendChild(r3); + root.appendChild(r7); r3.appendChild(r4); r4.appendChild(r5); r4.appendChild(r6); @@ -30,7 +32,8 @@ describe('parser', () => { { path: ['path', 'to', 'five'], id: '5', children: [], params: undefined }, { path: ['path', 'to', 'five2'], id: '6', children: [], params: undefined } ] } - ] } + ] }, + { path: ['path'], id: '6', children: [], params: undefined } ]; expect(readRouteNodes(root)).toEqual(expected); }); diff --git a/core/src/components/router/test/path.spec.tsx b/core/src/components/router/test/path.spec.tsx index 1c8306b3a2..310b5b7c01 100644 --- a/core/src/components/router/test/path.spec.tsx +++ b/core/src/components/router/test/path.spec.tsx @@ -189,6 +189,9 @@ describe('writePath', () => { writePath(history, '/', false, ['to', 'schedule'], ROUTER_INTENT_FORWARD, 123); expect(history.pushState).toHaveBeenCalledWith(123, '', '/to/schedule'); + + writePath(history, '/', false, ['to', 'schedule'], ROUTER_INTENT_FORWARD, 123, 'flag=true'); + expect(history.pushState).toHaveBeenCalledWith(123, '', '/to/schedule?flag=true'); }); it('should write non root path (no hash)', () => { @@ -204,6 +207,9 @@ describe('writePath', () => { writePath(history, '/path/to/', false, ['second', 'page'], ROUTER_INTENT_FORWARD, 2); expect(history.pushState).toHaveBeenCalledWith(2, '', '/path/to/second/page'); + + writePath(history, '/path/to/', false, ['second', 'page'], ROUTER_INTENT_FORWARD, 2, 'flag=true'); + expect(history.pushState).toHaveBeenCalledWith(2, '', '/path/to/second/page?flag=true'); }); it('should write root path (no hash)', () => { @@ -219,6 +225,9 @@ describe('writePath', () => { writePath(history, '/', true, ['to', 'schedule'], ROUTER_INTENT_FORWARD, 123); expect(history.pushState).toHaveBeenCalledWith(123, '', '#/to/schedule'); + + writePath(history, '/', true, ['to', 'schedule'], ROUTER_INTENT_FORWARD, 123, 'flag=true'); + expect(history.pushState).toHaveBeenCalledWith(123, '', '#/to/schedule?flag=true'); }); it('should write non root path (no hash)', () => { @@ -234,6 +243,9 @@ describe('writePath', () => { writePath(history, '/path/to/', true, ['second', 'page'], ROUTER_INTENT_FORWARD, 123); expect(history.pushState).toHaveBeenCalledWith(123, '', '#/path/to/second/page'); + + writePath(history, '/path/to/', true, ['second', 'page'], ROUTER_INTENT_FORWARD, 123, 'flag=true'); + expect(history.pushState).toHaveBeenCalledWith(123, '', '#/path/to/second/page?flag=true'); }); }); diff --git a/core/src/components/router/utils/path.ts b/core/src/components/router/utils/path.ts index e0acb1748a..3a6e315f67 100644 --- a/core/src/components/router/utils/path.ts +++ b/core/src/components/router/utils/path.ts @@ -28,7 +28,7 @@ export const chainToPath = (chain: RouteChain): string[] | null => { return path; }; -export const writePath = (history: History, root: string, useHash: boolean, path: string[], direction: RouterDirection, state: number) => { +export const writePath = (history: History, root: string, useHash: boolean, path: string[], direction: RouterDirection, state: number, queryString?: string) => { let url = generatePath([ ...parsePath(root), ...path @@ -36,6 +36,9 @@ export const writePath = (history: History, root: string, useHash: boolean, path if (useHash) { url = '#' + url; } + if (queryString !== undefined) { + url = url + '?' + queryString; + } if (direction === ROUTER_INTENT_FORWARD) { history.pushState(state, '', url); } else { @@ -79,7 +82,8 @@ export const parsePath = (path: string | undefined | null): string[] => { if (path == null) { return ['']; } - const segments = path.split('/') + const removeQueryString = path.split('?')[0]; + const segments = removeQueryString.split('/') .map(s => s.trim()) .filter(s => s.length > 0);