diff --git a/lib/ui/src/modules/ui/configs/handle_routing.js b/lib/ui/src/modules/ui/configs/handle_routing.js index 1ca89a8a021e..7f72c7c086de 100755 --- a/lib/ui/src/modules/ui/configs/handle_routing.js +++ b/lib/ui/src/modules/ui/configs/handle_routing.js @@ -40,7 +40,7 @@ export function getUrlState(data) { }; } -export function changeUrl(clientStore) { +export function changeUrl(clientStore, usePush) { // Do not change the URL if we are inside a popState event. if (config.insidePopState) return; @@ -48,7 +48,7 @@ export function changeUrl(clientStore) { if (!data.selectedKind) return; const state = getUrlState(data); - window.history.pushState(state, '', state.url); + window.history[usePush ? 'pushState' : 'replaceState'](state, '', state.url); } export function updateStore(queryParams, actions) { @@ -92,8 +92,22 @@ export default function({ clientStore }, actions) { // handle initial URL handleInitialUrl(actions, window.location); + const data = clientStore.getAll(); + let prevKind = data.selectedKind; + let prevStory = data.selectedStory; + // subscribe to clientStore and change the URL - clientStore.subscribe(() => changeUrl(clientStore)); + clientStore.subscribe(() => { + const { selectedKind, selectedStory } = clientStore.getAll(); + // use pushState only when a new story is selected + const usePush = + prevKind != null && + prevStory != null && + (selectedKind !== prevKind || selectedStory !== prevStory); + changeUrl(clientStore, usePush); + prevKind = selectedKind; + prevStory = selectedStory; + }); changeUrl(clientStore); // handle back button diff --git a/lib/ui/src/modules/ui/configs/handle_routing.test.js b/lib/ui/src/modules/ui/configs/handle_routing.test.js index aea5bbdd270b..82a734a86348 100755 --- a/lib/ui/src/modules/ui/configs/handle_routing.test.js +++ b/lib/ui/src/modules/ui/configs/handle_routing.test.js @@ -10,7 +10,7 @@ describe('manager.ui.config.handle_routing', () => { config.insidePopState = false; }); - test('should put the correct URL and state to pushState', done => { + test('should put the correct URL and state to replaceState', done => { const state = { selectedKind: 'kk', selectedStory: 'ss', @@ -31,7 +31,7 @@ describe('manager.ui.config.handle_routing', () => { const url = '?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp'; - const pushState = { + const replaceState = { url, selectedKind: 'kk', selectedStory: 'ss', @@ -42,16 +42,16 @@ describe('manager.ui.config.handle_routing', () => { downPanel: 'pp', customText: 'test', }; - const originalPushState = window.history.pushState; - window.history.pushState = (s, t, u) => { - expect(s).toEqual(pushState); - expect(u).toBe(pushState.url); + const originalReplaceState = window.history.replaceState; + window.history.replaceState = (s, t, u) => { + expect(s).toEqual(replaceState); + expect(u).toBe(replaceState.url); done(); }; changeUrl(clientStore); - window.history.pushState = originalPushState; + window.history.replaceState = originalReplaceState; }); });