@react-navigation/routers 8.0.0-alpha.2 → 8.0.0-alpha.20

package/lib/module/StackRouter.js

@@ -45,7 +45,57 @@ export const StackActions = {
         merge: options?.merge
       }
     };
+  },
+  retain(enable) {
+    return {
+      type: 'RETAIN',
+      payload: {
+        enable
+      }
+    };
+  },
+  dismiss(count = 1) {
+    return {
+      type: 'DISMISS',
+      payload: {
+        count
+      }
+    };
+  }
+};
+function retainRoutes(previousState, nextState) {
+  if (!nextState.retainedRouteKeys.length) {
+    return nextState;
   }
+  const retainedRouteKeySet = new Set(nextState.retainedRouteKeys);
+  const nextRouteKeySet = new Set(nextState.routes.map(route => route.key));
+  const retainedRoutes = getActiveRoutes(previousState).filter(route => retainedRouteKeySet.has(route.key) && !nextRouteKeySet.has(route.key));
+  if (!retainedRoutes.length) {
+    return nextState;
+  }
+  const removedRetainedRouteKeys = new Set(retainedRoutes.map(route => route.key));
+  return getStateWithRoutes(nextState, getActiveRoutes(nextState), getPreloadedRoutes(nextState), retainedRoutes.concat(getRetainedRoutes(nextState).filter(route => !removedRetainedRouteKeys.has(route.key))));
+}
+const getActiveRoutes = state => state.routes.slice(0, state.index + 1);
+const getInactiveRoutes = state => state.routes.slice(state.index + 1);
+const getPreloadedRoutes = state => {
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  return getInactiveRoutes(state).filter(route => !retainedRouteKeySet.has(route.key));
+};
+const getRetainedRoutes = state => {
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  return getInactiveRoutes(state).filter(route => retainedRouteKeySet.has(route.key));
+};
+const getStateWithRoutes = (state, activeRoutes, preloadedRoutes = getPreloadedRoutes(state), retainedRoutes = getRetainedRoutes(state)) => {
+  const routeKeySet = new Set(activeRoutes.map(route => route.key));
+  const retainedRouteKeySet = new Set(state.retainedRouteKeys);
+  const filteredRetainedRoutes = retainedRoutes.filter(route => !routeKeySet.has(route.key));
+  const filteredPreloadedRoutes = preloadedRoutes.filter(route => !retainedRouteKeySet.has(route.key) && !routeKeySet.has(route.key));
+  return {
+    ...state,
+    index: activeRoutes.length - 1,
+    routes: activeRoutes.concat(filteredRetainedRoutes, filteredPreloadedRoutes)
+  };
 };
 export function StackRouter(options) {
   const router = {
@@ -56,13 +106,16 @@ export function StackRouter(options) {
       routeParamList
     }) {
       const initialRouteName = options.initialRouteName !== undefined && routeNames.includes(options.initialRouteName) ? options.initialRouteName : routeNames[0];
+      if (initialRouteName == null) {
+        throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+      }
       return {
         stale: false,
         type: 'stack',
         key: `stack-${nanoid()}`,
         index: 0,
         routeNames,
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
         routes: [{
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
@@ -86,30 +139,28 @@ export function StackRouter(options) {
           ...route.params
         } : route.params
       }));
-      const preloadedRoutes = state.preloadedRoutes?.filter(route => routeNames.includes(route.name)).map(route => ({
-        ...route,
-        key: route.key || `${route.name}-${nanoid()}`,
-        params: routeParamList[route.name] !== undefined ? {
-          ...routeParamList[route.name],
-          ...route.params
-        } : route.params
-      })) ?? [];
       if (routes.length === 0) {
-        const initialRouteName = options.initialRouteName !== undefined ? options.initialRouteName : routeNames[0];
+        const initialRouteName = options.initialRouteName !== undefined && routeNames.includes(options.initialRouteName) ? options.initialRouteName : routeNames[0];
+        if (initialRouteName == null) {
+          throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+        }
         routes.push({
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
           params: routeParamList[initialRouteName]
         });
       }
+      const index = Math.min(Math.max(state.index ?? routes.length - 1, 0), routes.length - 1);
+      const routeKeys = new Set(routes.map(route => route.key));
+      const retainedRouteKeys = state.retainedRouteKeys?.filter(key => routeKeys.has(key)) ?? [];
       return {
         stale: false,
         type: 'stack',
         key: `stack-${nanoid()}`,
-        index: routes.length - 1,
+        index,
         routeNames,
         routes,
-        preloadedRoutes
+        retainedRouteKeys
       };
     },
     getStateForRouteNamesChange(state, {
@@ -117,45 +168,53 @@ export function StackRouter(options) {
       routeParamList,
       routeKeyChanges
     }) {
-      const routes = state.routes.filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const routes = getActiveRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const preloadedRoutes = getPreloadedRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
+      const retainedRoutes = getRetainedRoutes(state).filter(route => routeNames.includes(route.name) && !routeKeyChanges.includes(route.name));
       if (routes.length === 0) {
         const initialRouteName = options.initialRouteName !== undefined && routeNames.includes(options.initialRouteName) ? options.initialRouteName : routeNames[0];
+        if (initialRouteName == null) {
+          throw new Error("Couldn't initialize the stack navigator. Have you defined any screens?");
+        }
         routes.push({
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
           params: routeParamList[initialRouteName]
         });
       }
-      return {
+      const routeKeys = new Set([...routes, ...preloadedRoutes, ...retainedRoutes].map(route => route.key));
+      const retainedRouteKeys = state.retainedRouteKeys.filter(key => routeKeys.has(key));
+      return getStateWithRoutes({
         ...state,
         routeNames,
-        routes,
-        index: Math.min(state.index, routes.length - 1)
-      };
+        retainedRouteKeys
+      }, routes, preloadedRoutes, retainedRoutes);
     },
     getStateForRouteFocus(state, key) {
-      const index = state.routes.findIndex(r => r.key === key);
-      if (index === -1 || index === state.index) {
+      const activeRoutes = getActiveRoutes(state);
+      const route = state.routes.find(route => route.key === key);
+      if (route == null || route === activeRoutes.at(-1)) {
         return state;
       }
-      return {
-        ...state,
-        index,
-        routes: state.routes.slice(0, index + 1)
-      };
+      const index = activeRoutes.indexOf(route);
+      const routes = index === -1 ? activeRoutes.concat(route) : activeRoutes.slice(0, index + 1);
+      return retainRoutes(state, getStateWithRoutes(state, routes));
     },
     getStateForAction(state, action, options) {
       const {
         routeParamList
       } = options;
+      const routes = getActiveRoutes(state);
+      const preloadedRoutes = getPreloadedRoutes(state);
+      const inactiveRoutes = getInactiveRoutes(state);
       switch (action.type) {
         case 'REPLACE':
           {
-            const currentIndex = action.target === state.key && action.source ? state.routes.findIndex(r => r.key === action.source) : state.index;
-            if (currentIndex === -1) {
+            if (!state.routeNames.includes(action.payload.name)) {
               return null;
             }
-            if (!state.routeNames.includes(action.payload.name)) {
+            const currentIndex = action.source !== undefined ? routes.findIndex(r => r.key === action.source) : state.index;
+            if (currentIndex === -1) {
               return null;
             }
             const getId = options.routeGetIdList[action.payload.name];
@@ -163,8 +222,8 @@ export function StackRouter(options) {
               params: action.payload.params
             });
 
-            // Re-use preloaded route if available
-            let route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+            // Re-use inactive route if available
+            let route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
               params: route.params
             }));
             if (!route) {
@@ -172,12 +231,19 @@ export function StackRouter(options) {
                 action,
                 routeParamList
               });
+            } else {
+              const params = createParamsFromAction({
+                action,
+                routeParamList
+              });
+              if (route.params !== params) {
+                route = {
+                  ...route,
+                  params
+                };
+              }
             }
-            return {
-              ...state,
-              routes: state.routes.map((r, i) => i === currentIndex ? route : r),
-              preloadedRoutes: state.preloadedRoutes.filter(r => r.key !== route.key)
-            };
+            return retainRoutes(state, getStateWithRoutes(state, routes.map((r, i) => i === currentIndex ? route : r), preloadedRoutes.filter(r => r.key !== route.key)));
           }
         case 'PUSH':
         case 'NAVIGATE':
@@ -189,17 +255,31 @@ export function StackRouter(options) {
             const id = getId?.({
               params: action.payload.params
             });
+            let remainingRoutes = routes;
             let route;
             if (action.type === 'NAVIGATE') {
-              const currentRoute = state.routes[state.index];
-              if (id !== undefined) {
-                if (currentRoute.name === action.payload.name && id === getId?.({
-                  params: currentRoute.params
-                })) {
-                  route = currentRoute;
-                } else if (action.payload.pop) {
-                  for (let i = state.routes.length - 1; i >= 0; i--) {
-                    const r = state.routes[i];
+              const currentIndex = action.source !== undefined ? routes.findIndex(r => r.key === action.source) : state.index;
+              if (currentIndex === -1) {
+                return null;
+              }
+
+              /**
+               * When navigating,
+               * - If the current route matches the destination, reuse it.
+               * - Or, if a route matching the destination exists after the current, reuse it.
+               * - Remove all non-matching routes after the current.
+               */
+              remainingRoutes = routes.slice(0, currentIndex + 1);
+              route = routes.find((route, i) => i >= currentIndex && route.name === action.payload.name && (id === undefined || id === getId?.({
+                params: route.params
+              })));
+              if (!route && action.payload.pop) {
+                if (id !== undefined) {
+                  for (let i = remainingRoutes.length - 1; i >= 0; i--) {
+                    const r = remainingRoutes[i];
+                    if (r == null) {
+                      throw new Error(`Couldn't find a route at index ${i}.`);
+                    }
                     if (r.name !== action.payload.name) {
                       continue;
                     }
@@ -211,12 +291,16 @@ export function StackRouter(options) {
                     }
                     if (r.history?.length) {
                       for (let j = r.history.length - 1; j >= 0; j--) {
-                        if (r.history[j].type === 'params' && id === getId?.({
-                          params: r.history[j].params
+                        const historyEntry = r.history[j];
+                        if (historyEntry == null) {
+                          throw new Error(`Couldn't find a route history entry at index ${j}.`);
+                        }
+                        if (historyEntry.type === 'params' && id === getId?.({
+                          params: historyEntry.params
                         })) {
                           route = {
                             ...r,
-                            params: r.history[j].params,
+                            params: historyEntry.params,
                             history: r.history.slice(0, j)
                           };
                           break;
@@ -227,18 +311,13 @@ export function StackRouter(options) {
                       }
                     }
                   }
-                }
-              } else {
-                // If the route matches the current one, then navigate to it
-                if (action.payload.name === currentRoute.name) {
-                  route = currentRoute;
-                } else if (action.payload.pop) {
-                  route = state.routes.findLast(route => route.name === action.payload.name);
+                } else {
+                  route = remainingRoutes.findLast(route => route.name === action.payload.name);
                 }
               }
             }
             if (!route) {
-              route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+              route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
                 params: route.params
               }));
             }
@@ -255,98 +334,107 @@ export function StackRouter(options) {
                 routeParamList
               });
             }
-            let routes;
+            let nextRoutes;
             if (route) {
               if (action.type === 'NAVIGATE' && action.payload.pop) {
-                routes = [];
+                nextRoutes = [];
 
-                // Get all routes until the matching one
-                for (const r of state.routes) {
+                // Get all routes before the matching one
+                for (const r of remainingRoutes) {
                   if (r.key === route.key) {
-                    routes.push({
-                      ...route,
-                      path: action.payload.path !== undefined ? action.payload.path : route.path,
-                      params
-                    });
                     break;
                   }
-                  routes.push(r);
+                  nextRoutes.push(r);
                 }
               } else {
-                routes = state.routes.filter(r => r.key !== route.key);
-                routes.push({
-                  ...route,
-                  path: action.type === 'NAVIGATE' && action.payload.path !== undefined ? action.payload.path : route.path,
-                  params
-                });
+                nextRoutes = remainingRoutes.filter(r => r.key !== route.key);
               }
+              nextRoutes.push({
+                ...route,
+                path: action.type === 'NAVIGATE' && action.payload.path !== undefined ? action.payload.path : route.path,
+                params
+              });
             } else {
-              routes = [...state.routes, {
+              nextRoutes = [...remainingRoutes, {
                 key: `${action.payload.name}-${nanoid()}`,
                 name: action.payload.name,
                 path: action.type === 'NAVIGATE' ? action.payload.path : undefined,
                 params
               }];
             }
-            return {
-              ...state,
-              index: routes.length - 1,
-              preloadedRoutes: state.preloadedRoutes.filter(route => routes[routes.length - 1].key !== route.key),
-              routes
-            };
+            return retainRoutes(state, getStateWithRoutes(state, nextRoutes));
           }
         case 'POP':
           {
-            let currentIndex = action.target === state.key && action.source ? state.routes.findIndex(r => r.key === action.source) : state.index;
-            let route = state.routes[currentIndex];
+            let currentIndex = action.source !== undefined ? routes.findIndex(r => r.key === action.source) : state.index;
+            if (currentIndex === -1) {
+              return null;
+            }
+            let route = routes[currentIndex];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+            }
 
             /**
              * When popping entries,
              * - Pop entries from route.history
-             * - Pop routes from state.routes
+             * - Pop the route itself and continue from the route below it
              *
              * Repeat until:
              * - We have popped the amount of items in count
              * - There are no more items to pop
+             *
+             * Routes above the current route are removed.
              */
             if (route.history?.length || currentIndex > 0) {
               let count = action.payload.count;
-              let routes = state.routes;
               while (count > 0 && (route.history?.length || currentIndex > 0)) {
                 if (route.history?.length) {
-                  routes = [...routes];
                   const end = Math.min(count, route.history.length);
                   const last = route.history.at(-end);
                   const history = route.history.slice(0, -end);
                   const removed = route.history.length - history.length;
                   count = count - removed;
-                  routes[currentIndex] = {
+                  route = {
                     ...route,
                     params: last?.type === 'params' ? last.params : route.params,
                     history
                   };
                 }
                 if (currentIndex > 0 && count > 0) {
-                  const length = routes.length;
-                  const end = Math.max(currentIndex - count + 1, 1);
-                  routes = routes.slice(0, end).concat(routes.slice(currentIndex + 1));
-                  const removed = length - routes.length;
-                  count = count - removed;
-                  currentIndex = routes.length - 1;
-                  route = routes[currentIndex];
+                  count = count - 1;
+                  currentIndex = currentIndex - 1;
+                  const currentRoute = routes[currentIndex];
+                  if (currentRoute == null) {
+                    throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+                  }
+                  route = currentRoute;
                 }
               }
-              return {
-                ...state,
-                index: routes.length - 1,
-                routes
-              };
+              const nextRoutes = routes.slice(0, currentIndex + 1);
+              if (route !== routes[currentIndex]) {
+                nextRoutes[currentIndex] = route;
+              }
+              return retainRoutes(state, getStateWithRoutes(state, nextRoutes));
             }
             return null;
           }
+        case 'DISMISS':
+          {
+            const currentIndex = action.source !== undefined ? routes.findIndex(route => route.key === action.source) : state.index;
+            if (currentIndex === -1 || routes.length === 1 || action.payload.count < 1) {
+              return null;
+            }
+            const count = Math.min(action.payload.count, currentIndex + 1, routes.length - 1);
+            const firstIndex = currentIndex - count + 1;
+            return retainRoutes(state, getStateWithRoutes(state, routes.slice(0, firstIndex).concat(routes.slice(currentIndex + 1))));
+          }
         case 'POP_TO_TOP':
           {
-            let route = state.routes[0];
+            let route = routes[0];
+            if (route == null) {
+              throw new Error("Couldn't find a route at index 0.");
+            }
             if (state.index > 0 || route.history?.length) {
               if (route.history?.length) {
                 route = {
@@ -354,21 +442,17 @@ export function StackRouter(options) {
                   history: undefined
                 };
               }
-              return {
-                ...state,
-                index: 0,
-                routes: [route]
-              };
+              return retainRoutes(state, getStateWithRoutes(state, [route]));
             }
             return null;
           }
         case 'POP_TO':
           {
-            const currentIndex = action.target === state.key && action.source ? state.routes.findLastIndex(r => r.key === action.source) : state.index;
-            if (currentIndex === -1) {
+            if (!state.routeNames.includes(action.payload.name)) {
               return null;
             }
-            if (!state.routeNames.includes(action.payload.name)) {
+            const currentIndex = action.source !== undefined ? routes.findIndex(r => r.key === action.source) : state.index;
+            if (currentIndex === -1) {
               return null;
             }
 
@@ -381,7 +465,10 @@ export function StackRouter(options) {
             });
             if (id !== undefined) {
               for (let i = currentIndex; i >= 0; i--) {
-                const r = state.routes[i];
+                const r = routes[i];
+                if (r == null) {
+                  throw new Error(`Couldn't find a route at index ${i}.`);
+                }
                 if (r.name !== action.payload.name) {
                   continue;
                 }
@@ -393,8 +480,12 @@ export function StackRouter(options) {
                 }
                 if (r.history?.length) {
                   for (let j = r.history.length - 1; j >= 0; j--) {
-                    if (r.history[j].type === 'params' && id === getId?.({
-                      params: r.history[j].params
+                    const historyEntry = r.history[j];
+                    if (historyEntry == null) {
+                      throw new Error(`Couldn't find a route history entry at index ${j}.`);
+                    }
+                    if (historyEntry.type === 'params' && id === getId?.({
+                      params: historyEntry.params
                     })) {
                       index = i;
                       historyIndex = j;
@@ -406,11 +497,22 @@ export function StackRouter(options) {
                   }
                 }
               }
-            } else if (state.routes[currentIndex].name === action.payload.name) {
-              index = currentIndex;
             } else {
+              const currentRoute = routes[currentIndex];
+              if (currentRoute == null) {
+                throw new Error(`Couldn't find a route at index ${currentIndex}.`);
+              }
+              if (currentRoute.name === action.payload.name) {
+                index = currentIndex;
+              }
+            }
+            if (id == null && index === -1) {
               for (let i = currentIndex; i >= 0; i--) {
-                if (state.routes[i].name === action.payload.name) {
+                const route = routes[i];
+                if (route == null) {
+                  throw new Error(`Couldn't find a route at index ${i}.`);
+                }
+                if (route.name === action.payload.name) {
                   index = i;
                   break;
                 }
@@ -419,8 +521,8 @@ export function StackRouter(options) {
 
             // If the route doesn't exist, remove the current route and add the new one
             if (index === -1) {
-              // Re-use preloaded route if available
-              let route = state.preloadedRoutes.find(route => route.name === action.payload.name && id === getId?.({
+              // Re-use inactive route if available
+              let route = inactiveRoutes.find(route => route.name === action.payload.name && id === getId?.({
                 params: route.params
               }));
               if (!route) {
@@ -428,20 +530,33 @@ export function StackRouter(options) {
                   action,
                   routeParamList
                 });
+              } else {
+                const params = createParamsFromAction({
+                  action,
+                  routeParamList
+                });
+                if (route.params !== params) {
+                  route = {
+                    ...route,
+                    params
+                  };
+                }
               }
-              const routes = state.routes.slice(0, currentIndex).concat(route);
-              return {
-                ...state,
-                index: routes.length - 1,
-                routes,
-                preloadedRoutes: state.preloadedRoutes.filter(r => r.key !== route.key)
-              };
+              const nextRoutes = routes.slice(0, currentIndex).concat(route);
+              return retainRoutes(state, getStateWithRoutes(state, nextRoutes, preloadedRoutes.filter(r => r.key !== route.key)));
+            }
+            const route = routes[index];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${index}.`);
             }
-            const route = state.routes[index];
             let baseParams = route.params;
             let history = route.history;
             if (historyIndex !== undefined && route.history) {
-              baseParams = route.history[historyIndex].params;
+              const historyEntry = route.history[historyIndex];
+              if (historyEntry == null) {
+                throw new Error(`Couldn't find a route history entry at index ${historyIndex}.`);
+              }
+              baseParams = historyEntry.params;
               history = route.history.slice(0, historyIndex);
             }
             let params;
@@ -457,18 +572,14 @@ export function StackRouter(options) {
                 routeParamList
               });
             }
-            return {
-              ...state,
-              index,
-              routes: [...state.routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
-                ...route,
-                params,
-                history
-              } : state.routes[index]]
-            };
+            return retainRoutes(state, getStateWithRoutes(state, [...routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
+              ...route,
+              params,
+              history
+            } : route]));
           }
         case 'GO_BACK':
-          if (state.index > 0 || state.routes[state.index].history?.length) {
+          {
             return router.getStateForAction(state, {
               type: 'POP',
               payload: {
@@ -478,54 +589,64 @@ export function StackRouter(options) {
               source: action.source
             }, options);
           }
-          return null;
+        case 'RETAIN':
+          {
+            const route = routes[state.index];
+            if (route == null) {
+              throw new Error(`Couldn't find a route at index ${state.index}.`);
+            }
+            const routeKey = action.source ?? route.key;
+            if (!state.routes.some(route => route.key === routeKey)) {
+              return null;
+            }
+            if (action.payload.enable) {
+              if (state.retainedRouteKeys.includes(routeKey)) {
+                return state;
+              }
+              return {
+                ...state,
+                retainedRouteKeys: [...state.retainedRouteKeys, routeKey]
+              };
+            }
+            if (!state.retainedRouteKeys.includes(routeKey)) {
+              return state;
+            }
+            return getStateWithRoutes({
+              ...state,
+              retainedRouteKeys: state.retainedRouteKeys.filter(key => key !== routeKey)
+            }, routes, preloadedRoutes.filter(route => route.key !== routeKey));
+          }
         case 'PRELOAD':
           {
+            if (!state.routeNames.includes(action.payload.name)) {
+              return null;
+            }
             const getId = options.routeGetIdList[action.payload.name];
             const id = getId?.({
               params: action.payload.params
             });
-            let route;
-            if (id !== undefined) {
-              route = state.routes.find(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            }
+            const params = createParamsFromAction({
+              action,
+              routeParamList
+            });
+            const route = preloadedRoutes.findLast(route => route.name === action.payload.name && id === getId?.({
+              params: route.params
+            }));
             if (route) {
-              return {
-                ...state,
-                routes: state.routes.map(r => {
-                  if (r.key !== route?.key) {
-                    return r;
-                  }
-                  return {
-                    ...r,
-                    params: createParamsFromAction({
-                      action,
-                      routeParamList
-                    })
-                  };
-                })
-              };
-            } else {
-              return {
-                ...state,
-                preloadedRoutes: state.preloadedRoutes.filter(r => r.name !== action.payload.name || id !== getId?.({
-                  params: r.params
-                })).concat(createRouteFromAction({
-                  action,
-                  routeParamList
-                }))
-              };
+              return getStateWithRoutes(state, routes, preloadedRoutes.map(r => r.key === route.key && r.params !== params ? {
+                ...r,
+                params
+              } : r));
             }
+            return getStateWithRoutes(state, routes, preloadedRoutes.concat(createRouteFromAction({
+              action,
+              routeParamList
+            })));
           }
         default:
           return BaseRouter.getStateForAction(state, action);
       }
     },
-    getRoutesFromState(state) {
-      return [...state.routes, ...state.preloadedRoutes];
-    },
     actionCreators: StackActions
   };
   return router;