diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js index 616079c7ee318f3fbcf1fc1800e3b120df97dda3..e30650baa20b65b520e2a486b3eeb0a593a46d86 100644 --- a/packages/app-shell/src/app-shell.js +++ b/packages/app-shell/src/app-shell.js @@ -228,6 +228,12 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) { setState: (state) => { this.updateLangIfChanged(state.lang); this.switchComponent(state.component); + }, + getDefaultState: () => { + return { + lang: 'de', + component: this.routes[0], + }; } }, { baseUrl: new URL(this.basePath, window.location).pathname.replace(/\/$/, ''), diff --git a/packages/app-shell/src/router.js b/packages/app-shell/src/router.js index 8970e1758000bf4a85759939d2b064318d315a9b..e4ed40c081d714ca82d9ce70624d2a2adca8dbce 100644 --- a/packages/app-shell/src/router.js +++ b/packages/app-shell/src/router.js @@ -17,12 +17,14 @@ export class Router { constructor(routes, options, unioptions) { this.getState = options.getState; this.setState = options.setState; + this.getDefaultState = options.getDefaultState; // XXX: We only have one route atm // If we need more we need to pass the route name to each function this.routeName = options.routeName; console.assert(this.getState); console.assert(this.setState); + console.assert(this.getDefaultState); console.assert(this.routeName); // https://github.com/kriasoft/universal-router @@ -39,6 +41,7 @@ export class Router { */ setStateFromCurrentLocation() { const oldPathName = location.pathname; + this.router.resolve({pathname: oldPathName}).then(page => { const newPathname = this.getPathname(page); // In case of a router redirect, set the new location @@ -46,6 +49,8 @@ export class Router { const referrerUrl = location.href; window.history.replaceState({}, '', newPathname); this.dispatchLocationChanged(referrerUrl); + } else if (this.isBasePath(oldPathName)) { + page = this.getDefaultState(); } this.setState(page); }).catch((e) => { @@ -54,6 +59,10 @@ export class Router { }); } + isBasePath(pathname) { + return pathname.replace(/\/$/, '') === this.router.baseUrl.replace(/\/$/, ''); + } + /** * Update the router after some internal state change. */ @@ -65,6 +74,12 @@ export class Router { const oldPathname = location.pathname; if (newPathname === oldPathname) return; + + const defaultPathname = this.getPathname(this.getDefaultState()); + if (newPathname === defaultPathname && this.isBasePath(oldPathname)) { + return; + } + const referrerUrl = location.href; window.history.pushState({}, '', newPathname); this.dispatchLocationChanged(referrerUrl); diff --git a/packages/app-shell/test/unit.js b/packages/app-shell/test/unit.js index ba047aeb724c82eea5f291d1f2d17e5da3ca275c..6943d1c2a038b210326ea9a20714e9dd663e3671 100644 --- a/packages/app-shell/test/unit.js +++ b/packages/app-shell/test/unit.js @@ -19,6 +19,7 @@ suite('router', () => { routeName: 'foo', getState: () => { return {}; }, setState: (state) => { }, + getDefaultState: () => { return {}; }, }); router.setStateFromCurrentLocation();