kdu-router 4.0.16-rc.0 → 4.1.6

package/dist/kdu-router.global.js

@@ -1,70 +1,33 @@
 /*!
-  * kdu-router v4.0.16-rc.0
-  * (c) 2021-2022 NKDuy
+  * kdu-router v4.1.6
+  * (c) 2023 NKDuy
   * @license MIT
   */
 var KduRouter = (function (exports, kdu) {
   'use strict';
 
-  const hasSymbol = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
-  const PolySymbol = (name) => 
-  // kr = kdu router
-  hasSymbol
-      ? Symbol('[kdu-router]: ' + name )
-      : ('[kdu-router]: ' ) + name;
-  // rvlm = Router View Location Matched
-  /**
-   * RouteRecord being rendered by the closest ancestor Router View. Used for
-   * `onBeforeRouteUpdate` and `onBeforeRouteLeave`. rvlm stands for Router View
-   * Location Matched
-   *
-   * @internal
-   */
-  const matchedRouteKey = /*#__PURE__*/ PolySymbol('router view location matched' );
-  /**
-   * Allows overriding the router view depth to control which component in
-   * `matched` is rendered. rvd stands for Router View Depth
-   *
-   * @internal
-   */
-  const viewDepthKey = /*#__PURE__*/ PolySymbol('router view depth' );
-  /**
-   * Allows overriding the router instance returned by `useRouter` in tests. r
-   * stands for router
-   *
-   * @internal
-   */
-  const routerKey = /*#__PURE__*/ PolySymbol('router' );
-  /**
-   * Allows overriding the current route returned by `useRoute` in tests. rl
-   * stands for route location
-   *
-   * @internal
-   */
-  const routeLocationKey = /*#__PURE__*/ PolySymbol('route location' );
-  /**
-   * Allows overriding the current route used by router-view. Internally this is
-   * used when the `route` prop is passed.
-   *
-   * @internal
-   */
-  const routerViewLocationKey = /*#__PURE__*/ PolySymbol('router view location' );
-
   const isBrowser = typeof window !== 'undefined';
 
   function isESModule(obj) {
-      return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module');
+      return obj.__esModule || obj[Symbol.toStringTag] === 'Module';
   }
   const assign = Object.assign;
   function applyToParams(fn, params) {
       const newParams = {};
       for (const key in params) {
           const value = params[key];
-          newParams[key] = Array.isArray(value) ? value.map(fn) : fn(value);
+          newParams[key] = isArray(value)
+              ? value.map(fn)
+              : fn(value);
       }
       return newParams;
   }
-  const noop = () => { };
+  const noop = () => { };
+  /**
+   * Typesafe alternative to Array.isArray
+   * https://github.com/microsoft/TypeScript/pull/48228
+   */
+  const isArray = Array.isArray;
 
   function warn(msg) {
       // avoid using ...args as it breaks in older Edge builds
@@ -75,7 +38,7 @@ var KduRouter = (function (exports, kdu) {
   const TRAILING_SLASH_RE = /\/$/;
   const removeTrailingSlash = (path) => path.replace(TRAILING_SLASH_RE, '');
   /**
-   * Transforms an URI into a normalized history location
+   * Transforms a URI into a normalized history location
    *
    * @param parseQuery
    * @param location - URI to normalize
@@ -86,8 +49,13 @@ var KduRouter = (function (exports, kdu) {
   function parseURL(parseQuery, location, currentLocation = '/') {
       let path, query = {}, searchString = '', hash = '';
       // Could use URL and URLSearchParams but IE 11 doesn't support it
-      const searchPos = location.indexOf('?');
-      const hashPos = location.indexOf('#', searchPos > -1 ? searchPos : 0);
+      // TODO: move to new URL()
+      const hashPos = location.indexOf('#');
+      let searchPos = location.indexOf('?');
+      // the hash appears before the search, so it's not part of the search string
+      if (hashPos < searchPos && hashPos >= 0) {
+          searchPos = -1;
+      }
       if (searchPos > -1) {
           path = location.slice(0, searchPos);
           searchString = location.slice(searchPos + 1, hashPos > -1 ? hashPos : location.length);
@@ -119,8 +87,7 @@ var KduRouter = (function (exports, kdu) {
       return location.path + (query && '?') + query + (location.hash || '');
   }
   /**
-   * Strips off the base from the beginning of a location.pathname in a non
-   * case-sensitive way.
+   * Strips off the base from the beginning of a location.pathname in a non-case-sensitive way.
    *
    * @param pathname - location.pathname
    * @param base - base to strip off
@@ -172,9 +139,9 @@ var KduRouter = (function (exports, kdu) {
       return true;
   }
   function isSameRouteLocationParamsValue(a, b) {
-      return Array.isArray(a)
+      return isArray(a)
           ? isEquivalentArray(a, b)
-          : Array.isArray(b)
+          : isArray(b)
               ? isEquivalentArray(b, a)
               : a === b;
   }
@@ -186,7 +153,7 @@ var KduRouter = (function (exports, kdu) {
    * @param b - array of values or a single value
    */
   function isEquivalentArray(a, b) {
-      return Array.isArray(b)
+      return isArray(b)
           ? a.length === b.length && a.every((value, i) => value === b[i])
           : a.length === 1 && a[0] === b;
   }
@@ -212,18 +179,24 @@ var KduRouter = (function (exports, kdu) {
       let segment;
       for (toPosition = 0; toPosition < toSegments.length; toPosition++) {
           segment = toSegments[toPosition];
-          // can't go below zero
-          if (position === 1 || segment === '.')
+          // we stay on the same position
+          if (segment === '.')
               continue;
-          if (segment === '..')
-              position--;
-          // found something that is not relative path
+          // go up in the from array
+          if (segment === '..') {
+              // we can't go below zero, but we still need to increment toPosition
+              if (position > 1)
+                  position--;
+              // continue
+          }
+          // we reached a non-relative path, we stop here
           else
               break;
       }
       return (fromSegments.slice(0, position).join('/') +
           '/' +
           toSegments
+              // ensure we use at least the last element in the toSegments
               .slice(toPosition - (toPosition === toSegments.length ? 1 : 0))
               .join('/'));
   }
@@ -452,7 +425,7 @@ var KduRouter = (function (exports, kdu) {
           pauseState = currentLocation.value;
       }
       function listen(callback) {
-          // setup the listener and prepare teardown callbacks
+          // set up the listener and prepare teardown callbacks
           listeners.push(callback);
           const teardown = () => {
               const index = listeners.indexOf(callback);
@@ -475,7 +448,7 @@ var KduRouter = (function (exports, kdu) {
           window.removeEventListener('popstate', popStateHandler);
           window.removeEventListener('beforeunload', beforeUnloadListener);
       }
-      // setup the listeners and prepare teardown callbacks
+      // set up the listeners and prepare teardown callbacks
       window.addEventListener('popstate', popStateHandler);
       window.addEventListener('beforeunload', beforeUnloadListener);
       return {
@@ -513,14 +486,14 @@ var KduRouter = (function (exports, kdu) {
               // the length is off by one, we need to decrease it
               position: history.length - 1,
               replaced: true,
-              // don't add a scroll as the user may have an anchor and we want
+              // don't add a scroll as the user may have an anchor, and we want
               // scrollBehavior to be triggered without a saved position
               scroll: null,
           }, true);
       }
       function changeLocation(to, state, replace) {
           /**
-           * if a base tag is provided and we are on a normal domain, we have to
+           * if a base tag is provided, and we are on a normal domain, we have to
            * respect the provided `base` attribute because pushState() will use it and
            * potentially erase anything before the `#` where a base of
            * `/folder/#` but a base of `/` would erase the `/folder/` section. If
@@ -614,7 +587,7 @@ var KduRouter = (function (exports, kdu) {
   }
 
   /**
-   * Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere.
+   * Creates an in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere.
    * It's up to the user to replace that location with the starter location by either calling `router.push` or `router.replace`.
    *
    * @param base - Base applied to all urls, defaults to '/'
@@ -699,15 +672,13 @@ var KduRouter = (function (exports, kdu) {
   }
 
   /**
-   * Creates a hash history. Useful for web applications with no host (e.g.
-   * `file://`) or when configuring a server to handle any URL is not possible.
+   * Creates a hash history. Useful for web applications with no host (e.g. `file://`) or when configuring a server to
+   * handle any URL is not possible.
    *
-   * @param base - optional base to provide. Defaults to `location.pathname +
-   * location.search` If there is a `<base>` tag in the `head`, its value will be
-   * ignored in favor of this parameter **but note it affects all the
-   * history.pushState() calls**, meaning that if you use a `<base>` tag, it's
-   * `href` value **has to match this parameter** (ignoring anything after the
-   * `#`).
+   * @param base - optional base to provide. Defaults to `location.pathname + location.search` If there is a `<base>` tag
+   * in the `head`, its value will be ignored in favor of this parameter **but note it affects all the history.pushState()
+   * calls**, meaning that if you use a `<base>` tag, it's `href` value **has to match this parameter** (ignoring anything
+   * after the `#`).
    *
    * @example
    * ```js
@@ -772,7 +743,7 @@ var KduRouter = (function (exports, kdu) {
       redirectedFrom: undefined,
   };
 
-  const NavigationFailureSymbol = /*#__PURE__*/ PolySymbol('navigation failure' );
+  const NavigationFailureSymbol = Symbol('navigation failure' );
   /**
    * Enumeration with all possible types for navigation failures. Can be passed to
    * {@link isNavigationFailure} to check for specific failures.
@@ -797,21 +768,21 @@ var KduRouter = (function (exports, kdu) {
   })(exports.NavigationFailureType || (exports.NavigationFailureType = {}));
   // DEV only debug messages
   const ErrorTypeMessages = {
-      [1 /* MATCHER_NOT_FOUND */]({ location, currentLocation }) {
+      [1 /* ErrorTypes.MATCHER_NOT_FOUND */]({ location, currentLocation }) {
           return `No match for\n ${JSON.stringify(location)}${currentLocation
             ? '\nwhile being at\n' + JSON.stringify(currentLocation)
             : ''}`;
       },
-      [2 /* NAVIGATION_GUARD_REDIRECT */]({ from, to, }) {
+      [2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */]({ from, to, }) {
           return `Redirected from "${from.fullPath}" to "${stringifyRoute(to)}" via a navigation guard.`;
       },
-      [4 /* NAVIGATION_ABORTED */]({ from, to }) {
+      [4 /* ErrorTypes.NAVIGATION_ABORTED */]({ from, to }) {
           return `Navigation aborted from "${from.fullPath}" to "${to.fullPath}" via a navigation guard.`;
       },
-      [8 /* NAVIGATION_CANCELLED */]({ from, to }) {
+      [8 /* ErrorTypes.NAVIGATION_CANCELLED */]({ from, to }) {
           return `Navigation cancelled from "${from.fullPath}" to "${to.fullPath}" with a new navigation.`;
       },
-      [16 /* NAVIGATION_DUPLICATED */]({ from, to }) {
+      [16 /* ErrorTypes.NAVIGATION_DUPLICATED */]({ from, to }) {
           return `Avoided redundant navigation to current location: "${from.fullPath}".`;
       },
   };
@@ -843,7 +814,7 @@ var KduRouter = (function (exports, kdu) {
       return JSON.stringify(location, null, 2);
   }
 
-  // default pattern for a param: non greedy everything but /
+  // default pattern for a param: non-greedy everything but /
   const BASE_PARAM_PATTERN = '[^/]+?';
   const BASE_PATH_PARSER_OPTIONS = {
       sensitive: false,
@@ -870,23 +841,23 @@ var KduRouter = (function (exports, kdu) {
       const keys = [];
       for (const segment of segments) {
           // the root segment needs special treatment
-          const segmentScores = segment.length ? [] : [90 /* Root */];
+          const segmentScores = segment.length ? [] : [90 /* PathScore.Root */];
           // allow trailing slash
           if (options.strict && !segment.length)
               pattern += '/';
           for (let tokenIndex = 0; tokenIndex < segment.length; tokenIndex++) {
               const token = segment[tokenIndex];
-              // resets the score if we are inside a sub segment /:a-other-:b
-              let subSegmentScore = 40 /* Segment */ +
-                  (options.sensitive ? 0.25 /* BonusCaseSensitive */ : 0);
-              if (token.type === 0 /* Static */) {
+              // resets the score if we are inside a sub-segment /:a-other-:b
+              let subSegmentScore = 40 /* PathScore.Segment */ +
+                  (options.sensitive ? 0.25 /* PathScore.BonusCaseSensitive */ : 0);
+              if (token.type === 0 /* TokenType.Static */) {
                   // prepend the slash if we are starting a new segment
                   if (!tokenIndex)
                       pattern += '/';
                   pattern += token.value.replace(REGEX_CHARS_RE, '\\$&');
-                  subSegmentScore += 40 /* Static */;
+                  subSegmentScore += 40 /* PathScore.Static */;
               }
-              else if (token.type === 1 /* Param */) {
+              else if (token.type === 1 /* TokenType.Param */) {
                   const { value, repeatable, optional, regexp } = token;
                   keys.push({
                       name: value,
@@ -896,7 +867,7 @@ var KduRouter = (function (exports, kdu) {
                   const re = regexp ? regexp : BASE_PARAM_PATTERN;
                   // the user provided a custom regexp /:id(\\d+)
                   if (re !== BASE_PARAM_PATTERN) {
-                      subSegmentScore += 10 /* BonusCustomRegExp */;
+                      subSegmentScore += 10 /* PathScore.BonusCustomRegExp */;
                       // make sure the regexp is valid before using it
                       try {
                           new RegExp(`(${re})`);
@@ -919,13 +890,13 @@ var KduRouter = (function (exports, kdu) {
                   if (optional)
                       subPattern += '?';
                   pattern += subPattern;
-                  subSegmentScore += 20 /* Dynamic */;
+                  subSegmentScore += 20 /* PathScore.Dynamic */;
                   if (optional)
-                      subSegmentScore += -8 /* BonusOptional */;
+                      subSegmentScore += -8 /* PathScore.BonusOptional */;
                   if (repeatable)
-                      subSegmentScore += -20 /* BonusRepeatable */;
+                      subSegmentScore += -20 /* PathScore.BonusRepeatable */;
                   if (re === '.*')
-                      subSegmentScore += -50 /* BonusWildcard */;
+                      subSegmentScore += -50 /* PathScore.BonusWildcard */;
               }
               segmentScores.push(subSegmentScore);
           }
@@ -936,7 +907,7 @@ var KduRouter = (function (exports, kdu) {
       // only apply the strict bonus to the last score
       if (options.strict && options.end) {
           const i = score.length - 1;
-          score[i][score[i].length - 1] += 0.7000000000000001 /* BonusStrict */;
+          score[i][score[i].length - 1] += 0.7000000000000001 /* PathScore.BonusStrict */;
       }
       // TODO: dev only warn double trailing slash
       if (!options.strict)
@@ -968,20 +939,22 @@ var KduRouter = (function (exports, kdu) {
                   path += '/';
               avoidDuplicatedSlash = false;
               for (const token of segment) {
-                  if (token.type === 0 /* Static */) {
+                  if (token.type === 0 /* TokenType.Static */) {
                       path += token.value;
                   }
-                  else if (token.type === 1 /* Param */) {
+                  else if (token.type === 1 /* TokenType.Param */) {
                       const { value, repeatable, optional } = token;
                       const param = value in params ? params[value] : '';
-                      if (Array.isArray(param) && !repeatable)
+                      if (isArray(param) && !repeatable) {
                           throw new Error(`Provided param "${value}" is an array but it is not repeatable (* or + modifiers)`);
-                      const text = Array.isArray(param) ? param.join('/') : param;
+                      }
+                      const text = isArray(param)
+                          ? param.join('/')
+                          : param;
                       if (!text) {
                           if (optional) {
-                              // if we have more than one optional param like /:a?-static and there are more segments, we don't need to
-                              // care about the optional param
-                              if (segment.length < 2 && segments.length > 1) {
+                              // if we have more than one optional param like /:a?-static we don't need to care about the optional param
+                              if (segment.length < 2) {
                                   // remove the last slash as we could be at the end
                                   if (path.endsWith('/'))
                                       path = path.slice(0, -1);
@@ -997,7 +970,8 @@ var KduRouter = (function (exports, kdu) {
                   }
               }
           }
-          return path;
+          // avoid empty path when we have multiple optional params
+          return path || '/';
       }
       return {
           re,
@@ -1028,12 +1002,12 @@ var KduRouter = (function (exports, kdu) {
       // if the last subsegment was Static, the shorter segments should be sorted first
       // otherwise sort the longest segment first
       if (a.length < b.length) {
-          return a.length === 1 && a[0] === 40 /* Static */ + 40 /* Segment */
+          return a.length === 1 && a[0] === 40 /* PathScore.Static */ + 40 /* PathScore.Segment */
               ? -1
               : 1;
       }
       else if (a.length > b.length) {
-          return b.length === 1 && b[0] === 40 /* Static */ + 40 /* Segment */
+          return b.length === 1 && b[0] === 40 /* PathScore.Static */ + 40 /* PathScore.Segment */
               ? 1
               : -1;
       }
@@ -1084,7 +1058,7 @@ var KduRouter = (function (exports, kdu) {
   }
 
   const ROOT_TOKEN = {
-      type: 0 /* Static */,
+      type: 0 /* TokenType.Static */,
       value: '',
   };
   const VALID_PARAM_RE = /[a-zA-Z0-9_]/;
@@ -1104,7 +1078,7 @@ var KduRouter = (function (exports, kdu) {
       function crash(message) {
           throw new Error(`ERR (${state})/"${buffer}": ${message}`);
       }
-      let state = 0 /* Static */;
+      let state = 0 /* TokenizerState.Static */;
       let previousState = state;
       const tokens = [];
       // the segment will always be valid because we get into the initial state
@@ -1126,19 +1100,19 @@ var KduRouter = (function (exports, kdu) {
       function consumeBuffer() {
           if (!buffer)
               return;
-          if (state === 0 /* Static */) {
+          if (state === 0 /* TokenizerState.Static */) {
               segment.push({
-                  type: 0 /* Static */,
+                  type: 0 /* TokenType.Static */,
                   value: buffer,
               });
           }
-          else if (state === 1 /* Param */ ||
-              state === 2 /* ParamRegExp */ ||
-              state === 3 /* ParamRegExpEnd */) {
+          else if (state === 1 /* TokenizerState.Param */ ||
+              state === 2 /* TokenizerState.ParamRegExp */ ||
+              state === 3 /* TokenizerState.ParamRegExpEnd */) {
               if (segment.length > 1 && (char === '*' || char === '+'))
                   crash(`A repeatable param (${buffer}) must be alone in its segment. eg: '/:ids+.`);
               segment.push({
-                  type: 1 /* Param */,
+                  type: 1 /* TokenType.Param */,
                   value: buffer,
                   regexp: customRe,
                   repeatable: char === '*' || char === '+',
@@ -1155,13 +1129,13 @@ var KduRouter = (function (exports, kdu) {
       }
       while (i < path.length) {
           char = path[i++];
-          if (char === '\\' && state !== 2 /* ParamRegExp */) {
+          if (char === '\\' && state !== 2 /* TokenizerState.ParamRegExp */) {
               previousState = state;
-              state = 4 /* EscapeNext */;
+              state = 4 /* TokenizerState.EscapeNext */;
               continue;
           }
           switch (state) {
-              case 0 /* Static */:
+              case 0 /* TokenizerState.Static */:
                   if (char === '/') {
                       if (buffer) {
                           consumeBuffer();
@@ -1170,32 +1144,32 @@ var KduRouter = (function (exports, kdu) {
                   }
                   else if (char === ':') {
                       consumeBuffer();
-                      state = 1 /* Param */;
+                      state = 1 /* TokenizerState.Param */;
                   }
                   else {
                       addCharToBuffer();
                   }
                   break;
-              case 4 /* EscapeNext */:
+              case 4 /* TokenizerState.EscapeNext */:
                   addCharToBuffer();
                   state = previousState;
                   break;
-              case 1 /* Param */:
+              case 1 /* TokenizerState.Param */:
                   if (char === '(') {
-                      state = 2 /* ParamRegExp */;
+                      state = 2 /* TokenizerState.ParamRegExp */;
                   }
                   else if (VALID_PARAM_RE.test(char)) {
                       addCharToBuffer();
                   }
                   else {
                       consumeBuffer();
-                      state = 0 /* Static */;
+                      state = 0 /* TokenizerState.Static */;
                       // go back one character if we were not modifying
                       if (char !== '*' && char !== '?' && char !== '+')
                           i--;
                   }
                   break;
-              case 2 /* ParamRegExp */:
+              case 2 /* TokenizerState.ParamRegExp */:
                   // TODO: is it worth handling nested regexp? like :p(?:prefix_([^/]+)_suffix)
                   // it already works by escaping the closing )
                   // is this really something people need since you can also write
@@ -1205,16 +1179,16 @@ var KduRouter = (function (exports, kdu) {
                       if (customRe[customRe.length - 1] == '\\')
                           customRe = customRe.slice(0, -1) + char;
                       else
-                          state = 3 /* ParamRegExpEnd */;
+                          state = 3 /* TokenizerState.ParamRegExpEnd */;
                   }
                   else {
                       customRe += char;
                   }
                   break;
-              case 3 /* ParamRegExpEnd */:
+              case 3 /* TokenizerState.ParamRegExpEnd */:
                   // same as finalizing a param
                   consumeBuffer();
-                  state = 0 /* Static */;
+                  state = 0 /* TokenizerState.Static */;
                   // go back one character if we were not modifying
                   if (char !== '*' && char !== '?' && char !== '+')
                       i--;
@@ -1225,7 +1199,7 @@ var KduRouter = (function (exports, kdu) {
                   break;
           }
       }
-      if (state === 2 /* ParamRegExp */)
+      if (state === 2 /* TokenizerState.ParamRegExp */)
           crash(`Unfinished custom RegExp for param "${buffer}"`);
       consumeBuffer();
       finalizeSegment();
@@ -1280,6 +1254,9 @@ var KduRouter = (function (exports, kdu) {
           // used later on to remove by name
           const isRootAdd = !originalRecord;
           const mainNormalizedRecord = normalizeRouteRecord(record);
+          {
+              checkChildMissingNameWithEmptyPath(mainNormalizedRecord, parent);
+          }
           // we might be the child of an alias
           mainNormalizedRecord.aliasOf = originalRecord && originalRecord.record;
           const options = mergeOptions(globalOptions, record);
@@ -1323,11 +1300,11 @@ var KduRouter = (function (exports, kdu) {
                   throw new Error('Catch all routes ("*") must now be defined using a param with a custom regexp.\n' +
                       'See more at https://kdujs-router.web.app/guide/migration/#removed-star-or-catch-all-routes.');
               }
-              // create the object before hand so it can be passed to children
+              // create the object beforehand, so it can be passed to children
               matcher = createRouteRecordMatcher(normalizedRecord, parent, options);
               if (parent && path[0] === '/')
                   checkMissingParamsInAbsolutePath(matcher, parent);
-              // if we are an alias we must tell the original record that we exist
+              // if we are an alias we must tell the original record that we exist,
               // so we can be removed
               if (originalRecord) {
                   originalRecord.alias.push(matcher);
@@ -1345,20 +1322,27 @@ var KduRouter = (function (exports, kdu) {
                   if (isRootAdd && record.name && !isAliasRecord(matcher))
                       removeRoute(record.name);
               }
-              if ('children' in mainNormalizedRecord) {
+              if (mainNormalizedRecord.children) {
                   const children = mainNormalizedRecord.children;
                   for (let i = 0; i < children.length; i++) {
                       addRoute(children[i], matcher, originalRecord && originalRecord.children[i]);
                   }
               }
               // if there was no original record, then the first one was not an alias and all
-              // other alias (if any) need to reference this record when adding children
+              // other aliases (if any) need to reference this record when adding children
               originalRecord = originalRecord || matcher;
               // TODO: add normalized records for more flexibility
               // if (parent && isAliasRecord(originalRecord)) {
               //   parent.children.push(originalRecord)
               // }
-              insertMatcher(matcher);
+              // Avoid adding a record that doesn't display anything. This allows passing through records without a component to
+              // not be reached and pass through the catch all route
+              if ((matcher.record.components &&
+                  Object.keys(matcher.record.components).length) ||
+                  matcher.record.name ||
+                  matcher.record.redirect) {
+                  insertMatcher(matcher);
+              }
           }
           return originalMatcher
               ? () => {
@@ -1412,16 +1396,27 @@ var KduRouter = (function (exports, kdu) {
           if ('name' in location && location.name) {
               matcher = matcherMap.get(location.name);
               if (!matcher)
-                  throw createRouterError(1 /* MATCHER_NOT_FOUND */, {
+                  throw createRouterError(1 /* ErrorTypes.MATCHER_NOT_FOUND */, {
                       location,
                   });
+              // warn if the user is passing invalid params so they can debug it better when they get removed
+              {
+                  const invalidParams = Object.keys(location.params || {}).filter(paramName => !matcher.keys.find(k => k.name === paramName));
+                  if (invalidParams.length) {
+                      warn(`Discarded invalid param(s) "${invalidParams.join('", "')}" when navigating.`);
+                  }
+              }
               name = matcher.record.name;
               params = assign(
               // paramsFromLocation is a new object
               paramsFromLocation(currentLocation.params, 
               // only keep params that exist in the resolved location
               // TODO: only keep optional params coming from a parent record
-              matcher.keys.filter(k => !k.optional).map(k => k.name)), location.params);
+              matcher.keys.filter(k => !k.optional).map(k => k.name)), 
+              // discard any existing params in the current location that do not exist here
+              // #1497 this ensures better active/exact matching
+              location.params &&
+                  paramsFromLocation(location.params, matcher.keys.map(k => k.name)));
               // throws if cannot be stringified
               path = matcher.stringify(params);
           }
@@ -1435,7 +1430,6 @@ var KduRouter = (function (exports, kdu) {
               matcher = matchers.find(m => m.re.test(path));
               // matcher should have a value after the loop
               if (matcher) {
-                  // TODO: dev warning of unused params if provided
                   // we know the matcher works because we tested the regexp
                   params = matcher.parse(path);
                   name = matcher.record.name;
@@ -1448,7 +1442,7 @@ var KduRouter = (function (exports, kdu) {
                   ? matcherMap.get(currentLocation.name)
                   : matchers.find(m => m.re.test(currentLocation.path));
               if (!matcher)
-                  throw createRouterError(1 /* MATCHER_NOT_FOUND */, {
+                  throw createRouterError(1 /* ErrorTypes.MATCHER_NOT_FOUND */, {
                       location,
                       currentLocation,
                   });
@@ -1506,8 +1500,8 @@ var KduRouter = (function (exports, kdu) {
           updateGuards: new Set(),
           enterCallbacks: {},
           components: 'components' in record
-              ? record.components || {}
-              : { default: record.component },
+              ? record.components || null
+              : record.component && { default: record.component },
       };
   }
   /**
@@ -1517,7 +1511,7 @@ var KduRouter = (function (exports, kdu) {
    */
   function normalizeRecordProps(record) {
       const propsObject = {};
-      // props does not exist on redirect records but we can set false directly
+      // props does not exist on redirect records, but we can set false directly
       const props = record.props || false;
       if ('component' in record) {
           propsObject.default = props;
@@ -1571,17 +1565,31 @@ var KduRouter = (function (exports, kdu) {
   function checkSameParams(a, b) {
       for (const key of a.keys) {
           if (!key.optional && !b.keys.find(isSameParam.bind(null, key)))
-              return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" should have the exact same param named "${key.name}"`);
+              return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" must have the exact same param named "${key.name}"`);
       }
       for (const key of b.keys) {
           if (!key.optional && !a.keys.find(isSameParam.bind(null, key)))
-              return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" should have the exact same param named "${key.name}"`);
+              return warn(`Alias "${b.record.path}" and the original record: "${a.record.path}" must have the exact same param named "${key.name}"`);
+      }
+  }
+  /**
+   * A route with a name and a child with an empty path without a name should warn when adding the route
+   *
+   * @param mainNormalizedRecord - RouteRecordNormalized
+   * @param parent - RouteRecordMatcher
+   */
+  function checkChildMissingNameWithEmptyPath(mainNormalizedRecord, parent) {
+      if (parent &&
+          parent.record.name &&
+          !mainNormalizedRecord.name &&
+          !mainNormalizedRecord.path) {
+          warn(`The route named "${String(parent.record.name)}" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.`);
       }
   }
   function checkMissingParamsInAbsolutePath(record, parent) {
       for (const key of parent.keys) {
           if (!record.keys.find(isSameParam.bind(null, key)))
-              return warn(`Absolute path "${record.record.path}" should have the exact same param named "${key.name}" as its parent "${parent.record.path}".`);
+              return warn(`Absolute path "${record.record.path}" must have the exact same param named "${key.name}" as its parent "${parent.record.path}".`);
       }
   }
   function isRecordChildOf(record, parent) {
@@ -1595,7 +1603,7 @@ var KduRouter = (function (exports, kdu) {
    * On top of that, the RFC3986 (https://tools.ietf.org/html/rfc3986#section-2.2)
    * defines some extra characters to be encoded. Most browsers do not encode them
    * in encodeURI https://github.com/whatwg/url/issues/369, so it may be safer to
-   * also encode `!'()*`. Leaving unencoded only ASCII alphanumeric(`a-zA-Z0-9`)
+   * also encode `!'()*`. Leaving un-encoded only ASCII alphanumeric(`a-zA-Z0-9`)
    * plus `-._~`. This extra safety should be applied to query by patching the
    * string returned by encodeURIComponent encodeURI also encodes `[\]^`. `\`
    * should be encoded to avoid ambiguity. Browsers (IE, FF, C) transform a `\`
@@ -1619,7 +1627,7 @@ var KduRouter = (function (exports, kdu) {
    * application/x-www-form-urlencoded
    * (https://url.spec.whatwg.org/#urlencoded-parsing) and most browsers seems lo
    * leave the plus character as is in queries. To be more flexible, we allow the
-   * plus character on the query but it can also be manually encoded by the user.
+   * plus character on the query, but it can also be manually encoded by the user.
    *
    * Resources:
    * - https://url.spec.whatwg.org/#urlencoded-parsing
@@ -1751,7 +1759,7 @@ var KduRouter = (function (exports, kdu) {
           if (key in query) {
               // an extra variable for ts types
               let currentValue = query[key];
-              if (!Array.isArray(currentValue)) {
+              if (!isArray(currentValue)) {
                   currentValue = query[key] = [currentValue];
               }
               currentValue.push(value);
@@ -1784,7 +1792,7 @@ var KduRouter = (function (exports, kdu) {
               continue;
           }
           // keep null values
-          const values = Array.isArray(value)
+          const values = isArray(value)
               ? value.map(v => v && encodeQueryValue(v))
               : [value && encodeQueryValue(value)];
           values.forEach(value => {
@@ -1813,7 +1821,7 @@ var KduRouter = (function (exports, kdu) {
       for (const key in query) {
           const value = query[key];
           if (value !== undefined) {
-              normalizedQuery[key] = Array.isArray(value)
+              normalizedQuery[key] = isArray(value)
                   ? value.map(v => (v == null ? null : '' + v))
                   : value == null
                       ? value
@@ -1823,6 +1831,43 @@ var KduRouter = (function (exports, kdu) {
       return normalizedQuery;
   }
 
+  /**
+   * RouteRecord being rendered by the closest ancestor Router View. Used for
+   * `onBeforeRouteUpdate` and `onBeforeRouteLeave`. rvlm stands for Router View
+   * Location Matched
+   *
+   * @internal
+   */
+  const matchedRouteKey = Symbol('router view location matched' );
+  /**
+   * Allows overriding the router view depth to control which component in
+   * `matched` is rendered. rvd stands for Router View Depth
+   *
+   * @internal
+   */
+  const viewDepthKey = Symbol('router view depth' );
+  /**
+   * Allows overriding the router instance returned by `useRouter` in tests. r
+   * stands for router
+   *
+   * @internal
+   */
+  const routerKey = Symbol('router' );
+  /**
+   * Allows overriding the current route returned by `useRoute` in tests. rl
+   * stands for route location
+   *
+   * @internal
+   */
+  const routeLocationKey = Symbol('route location' );
+  /**
+   * Allows overriding the current route used by router-view. Internally this is
+   * used when the `route` prop is passed.
+   *
+   * @internal
+   */
+  const routerViewLocationKey = Symbol('router view location' );
+
   /**
    * Create a list of callbacks that can be reset. Used to create before and after navigation guards list
    */
@@ -1873,7 +1918,7 @@ var KduRouter = (function (exports, kdu) {
       // to avoid warning
       {}).value;
       if (!activeRecord) {
-          warn('No active route record was found when calling `onBeforeRouteLeave()`. Make sure you call this function inside of a component child of <router-view>. Maybe you called it inside of App.kdu?');
+          warn('No active route record was found when calling `onBeforeRouteLeave()`. Make sure you call this function inside a component child of <router-view>. Maybe you called it inside of App.kdu?');
           return;
       }
       registerGuard(activeRecord, 'leaveGuards', leaveGuard);
@@ -1894,7 +1939,7 @@ var KduRouter = (function (exports, kdu) {
       // to avoid warning
       {}).value;
       if (!activeRecord) {
-          warn('No active route record was found when calling `onBeforeRouteUpdate()`. Make sure you call this function inside of a component child of <router-view>. Maybe you called it inside of App.kdu?');
+          warn('No active route record was found when calling `onBeforeRouteUpdate()`. Make sure you call this function inside a component child of <router-view>. Maybe you called it inside of App.kdu?');
           return;
       }
       registerGuard(activeRecord, 'updateGuards', updateGuard);
@@ -1906,16 +1951,17 @@ var KduRouter = (function (exports, kdu) {
           (record.enterCallbacks[name] = record.enterCallbacks[name] || []);
       return () => new Promise((resolve, reject) => {
           const next = (valid) => {
-              if (valid === false)
-                  reject(createRouterError(4 /* NAVIGATION_ABORTED */, {
+              if (valid === false) {
+                  reject(createRouterError(4 /* ErrorTypes.NAVIGATION_ABORTED */, {
                       from,
                       to,
                   }));
+              }
               else if (valid instanceof Error) {
                   reject(valid);
               }
               else if (isRouteLocation(valid)) {
-                  reject(createRouterError(2 /* NAVIGATION_GUARD_REDIRECT */, {
+                  reject(createRouterError(2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */, {
                       from: to,
                       to: valid,
                   }));
@@ -1924,8 +1970,9 @@ var KduRouter = (function (exports, kdu) {
                   if (enterCallbackArray &&
                       // since enterCallbackArray is truthy, both record and name also are
                       record.enterCallbacks[name] === enterCallbackArray &&
-                      typeof valid === 'function')
+                      typeof valid === 'function') {
                       enterCallbackArray.push(valid);
+                  }
                   resolve();
               }
           };
@@ -1945,7 +1992,6 @@ var KduRouter = (function (exports, kdu) {
                       }
                       return resolvedValue;
                   });
-                  // TODO: test me!
               }
               else if (guardReturn !== undefined) {
                   // @ts-expect-error: _called is added at canOnlyBeCalledOnce
@@ -1973,6 +2019,10 @@ var KduRouter = (function (exports, kdu) {
   function extractComponentsGuards(matched, guardType, to, from) {
       const guards = [];
       for (const record of matched) {
+          if (!record.components && !record.children.length) {
+              warn(`Record with path "${record.path}" is either missing a "component(s)"` +
+                  ` or "children" property.`);
+          }
           for (const name in record.components) {
               let rawComponent = record.components[name];
               {
@@ -2029,6 +2079,7 @@ var KduRouter = (function (exports, kdu) {
                           ? resolved.default
                           : resolved;
                       // replace the function with the resolved component
+                      // cannot be null or undefined because we went into the for loop
                       record.components[name] = resolvedComponent;
                       // __kccOpts is added by kdu-class-component and contain the regular options
                       const options = resolvedComponent.__kccOpts || resolvedComponent;
@@ -2042,6 +2093,7 @@ var KduRouter = (function (exports, kdu) {
   }
   /**
    * Allows differentiating lazy components from functional components and kdu-class-component
+   * @internal
    *
    * @param component
    */
@@ -2050,6 +2102,34 @@ var KduRouter = (function (exports, kdu) {
           'displayName' in component ||
           'props' in component ||
           '__kccOpts' in component);
+  }
+  /**
+   * Ensures a route is loaded, so it can be passed as o prop to `<RouterView>`.
+   *
+   * @param route - resolved route to load
+   */
+  function loadRouteLocation(route) {
+      return route.matched.every(record => record.redirect)
+          ? Promise.reject(new Error('Cannot load a route that redirects.'))
+          : Promise.all(route.matched.map(record => record.components &&
+              Promise.all(Object.keys(record.components).reduce((promises, name) => {
+                  const rawComponent = record.components[name];
+                  if (typeof rawComponent === 'function' &&
+                      !('displayName' in rawComponent)) {
+                      promises.push(rawComponent().then(resolved => {
+                          if (!resolved)
+                              return Promise.reject(new Error(`Couldn't resolve component "${name}" at "${record.path}". Ensure you passed a function that returns a promise.`));
+                          const resolvedComponent = isESModule(resolved)
+                              ? resolved.default
+                              : resolved;
+                          // replace the function with the resolved component
+                          // cannot be null or undefined because we went into the for loop
+                          record.components[name] = resolvedComponent;
+                          return;
+                      }));
+                  }
+                  return promises;
+              }, [])))).then(() => route);
   }
 
   // TODO: we could allow currentRoute as a prop to expose `isActive` and
@@ -2115,6 +2195,9 @@ var KduRouter = (function (exports, kdu) {
               }, { flush: 'post' });
           }
       }
+      /**
+       * NOTE: update {@link _RouterLinkI}'s `$slots` type when updating this
+       */
       return {
           route,
           href: kdu.computed(() => route.value.href),
@@ -2164,7 +2247,7 @@ var KduRouter = (function (exports, kdu) {
                           : null,
                       href: link.href,
                       // this would override user added attrs but Kdu will still add
-                      // the listener so we end up triggering both
+                      // the listener, so we end up triggering both
                       onClick: link.navigate,
                       class: elClass.value,
                   }, children);
@@ -2209,7 +2292,7 @@ var KduRouter = (function (exports, kdu) {
                   return false;
           }
           else {
-              if (!Array.isArray(outerValue) ||
+              if (!isArray(outerValue) ||
                   outerValue.length !== innerValue.length ||
                   innerValue.some((value, i) => value !== outerValue[i]))
                   return false;
@@ -2253,9 +2336,21 @@ var KduRouter = (function (exports, kdu) {
           warnDeprecatedUsage();
           const injectedRoute = kdu.inject(routerViewLocationKey);
           const routeToDisplay = kdu.computed(() => props.route || injectedRoute.value);
-          const depth = kdu.inject(viewDepthKey, 0);
-          const matchedRouteRef = kdu.computed(() => routeToDisplay.value.matched[depth]);
-          kdu.provide(viewDepthKey, depth + 1);
+          const injectedDepth = kdu.inject(viewDepthKey, 0);
+          // The depth changes based on empty components option, which allows passthrough routes e.g. routes with children
+          // that are used to reuse the `path` property
+          const depth = kdu.computed(() => {
+              let initialDepth = kdu.unref(injectedDepth);
+              const { matched } = routeToDisplay.value;
+              let matchedRoute;
+              while ((matchedRoute = matched[initialDepth]) &&
+                  !matchedRoute.components) {
+                  initialDepth++;
+              }
+              return initialDepth;
+          });
+          const matchedRouteRef = kdu.computed(() => routeToDisplay.value.matched[depth.value]);
+          kdu.provide(viewDepthKey, kdu.computed(() => depth.value + 1));
           kdu.provide(matchedRouteKey, matchedRouteRef);
           kdu.provide(routerViewLocationKey, routeToDisplay);
           const viewRef = kdu.ref();
@@ -2267,7 +2362,7 @@ var KduRouter = (function (exports, kdu) {
                   // this will update the instance for new instances as well as reused
                   // instances when navigating to a new route
                   to.instances[name] = instance;
-                  // the component instance is reused for a different route or name so
+                  // the component instance is reused for a different route or name, so
                   // we copy any saved update or leave guards. With async setup, the
                   // mounting component will mount before the matchedRoute changes,
                   // making instance === oldInstance, so we check if guards have been
@@ -2293,16 +2388,16 @@ var KduRouter = (function (exports, kdu) {
           }, { flush: 'post' });
           return () => {
               const route = routeToDisplay.value;
-              const matchedRoute = matchedRouteRef.value;
-              const ViewComponent = matchedRoute && matchedRoute.components[props.name];
               // we need the value at the time we render because when we unmount, we
               // navigated to a different location so the value is different
               const currentName = props.name;
+              const matchedRoute = matchedRouteRef.value;
+              const ViewComponent = matchedRoute && matchedRoute.components[currentName];
               if (!ViewComponent) {
                   return normalizeSlot(slots.default, { Component: ViewComponent, route });
               }
               // props from route configuration
-              const routePropsOption = matchedRoute.props[props.name];
+              const routePropsOption = matchedRoute.props[currentName];
               const routeProps = routePropsOption
                   ? routePropsOption === true
                       ? route.params
@@ -2324,12 +2419,12 @@ var KduRouter = (function (exports, kdu) {
                   component.ref) {
                   // TODO: can display if it's an alias, its props
                   const info = {
-                      depth,
+                      depth: depth.value,
                       name: matchedRoute.name,
                       path: matchedRoute.path,
                       meta: matchedRoute.meta,
                   };
-                  const internalInstances = Array.isArray(component.ref)
+                  const internalInstances = isArray(component.ref)
                       ? component.ref.map(r => r.i)
                       : [component.ref.i];
                   internalInstances.forEach(instance => {
@@ -2542,6 +2637,13 @@ var KduRouter = (function (exports, kdu) {
       }
   }
 
+  /**
+   * Copies a route location and removes any problematic properties that cannot be shown in devtools (e.g. Kdu instances).
+   *
+   * @param routeLocation - routeLocation to format
+   * @param tooltip - optional tooltip
+   * @returns a copy of the routeLocation
+   */
   function formatRouteLocation(routeLocation, tooltip) {
       const copy = assign({}, routeLocation, {
           // remove variables that can contain kdu instances
@@ -2583,6 +2685,9 @@ var KduRouter = (function (exports, kdu) {
           componentStateTypes: ['Routing'],
           app,
       }, api => {
+          if (typeof api.now !== 'function') {
+              console.warn('[Kdu Router]: You seem to be using an outdated version of Kdu Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://kdujs-devtools.web.app/guide/installation.html.');
+          }
           // display state added by the router
           api.on.inspectComponent((payload, ctx) => {
               if (payload.instanceData) {
@@ -2606,7 +2711,7 @@ var KduRouter = (function (exports, kdu) {
                   });
               }
               // if multiple useLink are used
-              if (Array.isArray(componentInstance.__krl_devtools)) {
+              if (isArray(componentInstance.__krl_devtools)) {
                   componentInstance.__devtoolsApi = api;
                   componentInstance.__krl_devtools.forEach(devtoolsData => {
                       let backgroundColor = ORANGE_400;
@@ -2759,7 +2864,7 @@ var KduRouter = (function (exports, kdu) {
           api.on.getInspectorState(payload => {
               if (payload.app === app && payload.inspectorId === routerInspectorId) {
                   const routes = matcher.getRoutes();
-                  const route = routes.find(route => route.record.__vd_id === payload.nodeId);
+                  const route = routes.find(route => route.record.__kd_id === payload.nodeId);
                   if (route) {
                       payload.state = {
                           options: formatRouteRecordMatcherForStateInspector(route),
@@ -2823,6 +2928,13 @@ var KduRouter = (function (exports, kdu) {
               value: route.alias.map(alias => alias.record.path),
           });
       }
+      if (Object.keys(route.record.meta).length) {
+          fields.push({
+              editable: false,
+              key: 'meta',
+              value: route.record.meta,
+          });
+      }
       fields.push({
           key: 'score',
           editable: false,
@@ -2865,21 +2977,21 @@ var KduRouter = (function (exports, kdu) {
               backgroundColor: ORANGE_400,
           });
       }
-      if (route.__vd_match) {
+      if (route.__kd_match) {
           tags.push({
               label: 'matches',
               textColor: 0,
               backgroundColor: PINK_500,
           });
       }
-      if (route.__vd_exactActive) {
+      if (route.__kd_exactActive) {
           tags.push({
               label: 'exact',
               textColor: 0,
               backgroundColor: LIME_500,
           });
       }
-      if (route.__vd_active) {
+      if (route.__kd_active) {
           tags.push({
               label: 'active',
               textColor: 0,
@@ -2888,18 +3000,19 @@ var KduRouter = (function (exports, kdu) {
       }
       if (record.redirect) {
           tags.push({
-              label: 'redirect: ' +
-                  (typeof record.redirect === 'string' ? record.redirect : 'Object'),
+              label: typeof record.redirect === 'string'
+                  ? `redirect: ${record.redirect}`
+                  : 'redirects',
               textColor: 0xffffff,
               backgroundColor: DARK,
           });
       }
       // add an id to be able to select it. Using the `path` is not possible because
       // empty path children would collide with their parents
-      let id = record.__vd_id;
+      let id = record.__kd_id;
       if (id == null) {
           id = String(routeRecordId++);
-          record.__vd_id = id;
+          record.__kd_id = id;
       }
       return {
           id,
@@ -2916,19 +3029,19 @@ var KduRouter = (function (exports, kdu) {
       // reset the matching state
       const isExactActive = currentRoute.matched.length &&
           isSameRouteRecord(currentRoute.matched[currentRoute.matched.length - 1], route.record);
-      route.__vd_exactActive = route.__vd_active = isExactActive;
+      route.__kd_exactActive = route.__kd_active = isExactActive;
       if (!isExactActive) {
-          route.__vd_active = currentRoute.matched.some(match => isSameRouteRecord(match, route.record));
+          route.__kd_active = currentRoute.matched.some(match => isSameRouteRecord(match, route.record));
       }
       route.children.forEach(childRoute => markRouteRecordActive(childRoute, currentRoute));
   }
   function resetMatchStateOnRouteRecord(route) {
-      route.__vd_match = false;
+      route.__kd_match = false;
       route.children.forEach(resetMatchStateOnRouteRecord);
   }
   function isRouteMatching(route, filter) {
       const found = String(route.re).match(EXTRACT_REGEXP_RE);
-      route.__vd_match = false;
+      route.__kd_match = false;
       if (!found || found.length < 3) {
           return false;
       }
@@ -2939,7 +3052,7 @@ var KduRouter = (function (exports, kdu) {
           route.children.forEach(child => isRouteMatching(child, filter));
           // exception case: `/`
           if (route.record.path !== '/' || filter === '/') {
-              route.__vd_match = route.re.test(filter);
+              route.__kd_match = route.re.test(filter);
               return true;
           }
           // hide the / route
@@ -3068,7 +3181,7 @@ var KduRouter = (function (exports, kdu) {
                       delete targetParams[key];
                   }
               }
-              // pass encoded values to the matcher so it can produce encoded path and fullPath
+              // pass encoded values to the matcher, so it can produce encoded path and fullPath
               matcherLocation = assign({}, rawLocation, {
                   params: encodeParams(rawLocation.params),
               });
@@ -3081,7 +3194,7 @@ var KduRouter = (function (exports, kdu) {
           if (hash && !hash.startsWith('#')) {
               warn(`A \`hash\` should always start with the character "#". Replace "${hash}" with "#${hash}".`);
           }
-          // decoding them) the matcher might have merged current location params so
+          // the matcher might have merged current location params, so
           // we need to run the decoding again
           matchedRoute.params = normalizeParams(decodeParams(matchedRoute.params));
           const fullPath = stringifyURL(stringifyQuery$1, assign({}, rawLocation, {
@@ -3122,7 +3235,7 @@ var KduRouter = (function (exports, kdu) {
       }
       function checkCanceledNavigation(to, from) {
           if (pendingLocation !== to) {
-              return createRouterError(8 /* NAVIGATION_CANCELLED */, {
+              return createRouterError(8 /* ErrorTypes.NAVIGATION_CANCELLED */, {
                   from,
                   to,
               });
@@ -3157,7 +3270,8 @@ var KduRouter = (function (exports, kdu) {
               return assign({
                   query: to.query,
                   hash: to.hash,
-                  params: to.params,
+                  // avoid transferring params if the redirect has a path
+                  params: 'path' in newTargetLocation ? {} : to.params,
               }, newTargetLocation);
           }
       }
@@ -3171,7 +3285,9 @@ var KduRouter = (function (exports, kdu) {
           const shouldRedirect = handleRedirectRecord(targetLocation);
           if (shouldRedirect)
               return pushWithRedirect(assign(locationAsObject(shouldRedirect), {
-                  state: data,
+                  state: typeof shouldRedirect === 'object'
+                      ? assign({}, data, shouldRedirect.state)
+                      : data,
                   force,
                   replace,
               }), 
@@ -3182,7 +3298,7 @@ var KduRouter = (function (exports, kdu) {
           toLocation.redirectedFrom = redirectedFrom;
           let failure;
           if (!force && isSameRouteLocation(stringifyQuery$1, from, targetLocation)) {
-              failure = createRouterError(16 /* NAVIGATION_DUPLICATED */, { to: toLocation, from });
+              failure = createRouterError(16 /* ErrorTypes.NAVIGATION_DUPLICATED */, { to: toLocation, from });
               // trigger scroll to allow scrolling to the same anchor
               handleScroll(from, from, 
               // this is a push, the only way for it to be triggered from a
@@ -3195,14 +3311,14 @@ var KduRouter = (function (exports, kdu) {
           return (failure ? Promise.resolve(failure) : navigate(toLocation, from))
               .catch((error) => isNavigationFailure(error)
               ? // navigation redirects still mark the router as ready
-                  isNavigationFailure(error, 2 /* NAVIGATION_GUARD_REDIRECT */)
+                  isNavigationFailure(error, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)
                       ? error
                       : markAsReady(error) // also returns the error
               : // reject any unknown error
                   triggerError(error, toLocation, from))
               .then((failure) => {
               if (failure) {
-                  if (isNavigationFailure(failure, 2 /* NAVIGATION_GUARD_REDIRECT */)) {
+                  if (isNavigationFailure(failure, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)) {
                       if (// we are redirecting to the same location we were already at
                           isSameRouteLocation(stringifyQuery$1, resolve(failure.to), toLocation) &&
                           // and we have done it a couple of times
@@ -3217,10 +3333,14 @@ var KduRouter = (function (exports, kdu) {
                       }
                       return pushWithRedirect(
                       // keep options
-                      assign(locationAsObject(failure.to), {
-                          state: data,
-                          force,
+                      assign({
+                          // preserve an existing replacement but allow the redirect to override it
                           replace,
+                      }, locationAsObject(failure.to), {
+                          state: typeof failure.to === 'object'
+                              ? assign({}, data, failure.to.state)
+                              : data,
+                          force,
                       }), 
                       // preserve the original redirectedFrom if any
                       redirectedFrom || toLocation);
@@ -3286,7 +3406,7 @@ var KduRouter = (function (exports, kdu) {
               for (const record of to.matched) {
                   // do not trigger beforeEnter on reused views
                   if (record.beforeEnter && !from.matched.includes(record)) {
-                      if (Array.isArray(record.beforeEnter)) {
+                      if (isArray(record.beforeEnter)) {
                           for (const beforeEnter of record.beforeEnter)
                               guards.push(guardToPromiseFn(beforeEnter, to, from));
                       }
@@ -3319,7 +3439,7 @@ var KduRouter = (function (exports, kdu) {
               return runGuardQueue(guards);
           })
               // catch any navigation canceled
-              .catch(err => isNavigationFailure(err, 8 /* NAVIGATION_CANCELLED */)
+              .catch(err => isNavigationFailure(err, 8 /* ErrorTypes.NAVIGATION_CANCELLED */)
               ? err
               : Promise.reject(err)));
       }
@@ -3366,6 +3486,8 @@ var KduRouter = (function (exports, kdu) {
           if (removeHistoryListener)
               return;
           removeHistoryListener = routerHistory.listen((to, _from, info) => {
+              if (!router.listening)
+                  return;
               // cannot be a redirect route because it was in history
               const toLocation = resolve(to);
               // due to dynamic routing, and to hash history with manual navigation
@@ -3384,15 +3506,15 @@ var KduRouter = (function (exports, kdu) {
               }
               navigate(toLocation, from)
                   .catch((error) => {
-                  if (isNavigationFailure(error, 4 /* NAVIGATION_ABORTED */ | 8 /* NAVIGATION_CANCELLED */)) {
+                  if (isNavigationFailure(error, 4 /* ErrorTypes.NAVIGATION_ABORTED */ | 8 /* ErrorTypes.NAVIGATION_CANCELLED */)) {
                       return error;
                   }
-                  if (isNavigationFailure(error, 2 /* NAVIGATION_GUARD_REDIRECT */)) {
+                  if (isNavigationFailure(error, 2 /* ErrorTypes.NAVIGATION_GUARD_REDIRECT */)) {
                       // Here we could call if (info.delta) routerHistory.go(-info.delta,
                       // false) but this is bug prone as we have no way to wait the
                       // navigation to be finished before calling pushWithRedirect. Using
-                      // a setTimeout of 16ms seems to work but there is not guarantee for
-                      // it to work on every browser. So Instead we do not restore the
+                      // a setTimeout of 16ms seems to work but there is no guarantee for
+                      // it to work on every browser. So instead we do not restore the
                       // history entry and trigger a new navigation as requested by the
                       // navigation guard.
                       // the error is already handled by router.push we just want to avoid
@@ -3402,10 +3524,10 @@ var KduRouter = (function (exports, kdu) {
                       )
                           .then(failure => {
                           // manual change in hash history #916 ending up in the URL not
-                          // changing but it was changed by the manual url change, so we
+                          // changing, but it was changed by the manual url change, so we
                           // need to manually change it ourselves
-                          if (isNavigationFailure(failure, 4 /* NAVIGATION_ABORTED */ |
-                              16 /* NAVIGATION_DUPLICATED */) &&
+                          if (isNavigationFailure(failure, 4 /* ErrorTypes.NAVIGATION_ABORTED */ |
+                              16 /* ErrorTypes.NAVIGATION_DUPLICATED */) &&
                               !info.delta &&
                               info.type === NavigationType.pop) {
                               routerHistory.go(-1, false);
@@ -3416,8 +3538,9 @@ var KduRouter = (function (exports, kdu) {
                       return Promise.reject();
                   }
                   // do not restore history on unknown direction
-                  if (info.delta)
+                  if (info.delta) {
                       routerHistory.go(-info.delta, false);
+                  }
                   // unrecognized error, transfer to the global handler
                   return triggerError(error, toLocation, from);
               })
@@ -3429,11 +3552,14 @@ var KduRouter = (function (exports, kdu) {
                           toLocation, from, false);
                   // revert the navigation
                   if (failure) {
-                      if (info.delta) {
+                      if (info.delta &&
+                          // a new navigation has been triggered, so we do not want to revert, that will change the current history
+                          // entry while a different route is displayed
+                          !isNavigationFailure(failure, 8 /* ErrorTypes.NAVIGATION_CANCELLED */)) {
                           routerHistory.go(-info.delta, false);
                       }
                       else if (info.type === NavigationType.pop &&
-                          isNavigationFailure(failure, 4 /* NAVIGATION_ABORTED */ | 16 /* NAVIGATION_DUPLICATED */)) {
+                          isNavigationFailure(failure, 4 /* ErrorTypes.NAVIGATION_ABORTED */ | 16 /* ErrorTypes.NAVIGATION_DUPLICATED */)) {
                           // manual change in hash history #916
                           // it's like a push but lacks the information of the direction
                           routerHistory.go(-1, false);
@@ -3509,6 +3635,7 @@ var KduRouter = (function (exports, kdu) {
       const installedApps = new Set();
       const router = {
           currentRoute,
+          listening: true,
           addRoute,
           removeRoute,
           hasRoute,
@@ -3572,6 +3699,7 @@ var KduRouter = (function (exports, kdu) {
                   }
                   unmountApp();
               };
+              // TODO: this probably needs to be updated so it can be used by kdu-termui
               if (isBrowser) {
                   addDevtools(app, router, matcher);
               }
@@ -3630,6 +3758,7 @@ var KduRouter = (function (exports, kdu) {
   exports.createWebHashHistory = createWebHashHistory;
   exports.createWebHistory = createWebHistory;
   exports.isNavigationFailure = isNavigationFailure;
+  exports.loadRouteLocation = loadRouteLocation;
   exports.matchedRouteKey = matchedRouteKey;
   exports.onBeforeRouteLeave = onBeforeRouteLeave;
   exports.onBeforeRouteUpdate = onBeforeRouteUpdate;