@react-navigation/routers 8.0.0-alpha.0 → 8.0.0-alpha.10

package/lib/module/BaseRouter.js

@@ -47,11 +47,12 @@ export const BaseRouter = {
       case 'RESET':
         {
           const nextState = action.payload;
-          if (nextState.routes.length === 0 || nextState.routes.some(route => !state.routeNames.includes(route.name))) {
+          const routeNamesSet = new Set(state.routeNames);
+          if (nextState.routes.length === 0 || nextState.routes.some(route => !routeNamesSet.has(route.name))) {
             return null;
           }
           if (nextState.stale === false) {
-            if (state.routeNames.length !== nextState.routeNames.length || nextState.routeNames.some(name => !state.routeNames.includes(name))) {
+            if (state.routeNames.length !== nextState.routeNames.length || nextState.routeNames.some(name => !routeNamesSet.has(name))) {
               return null;
             }
             return {

package/lib/module/BaseRouter.js.map

@@ -1 +1 @@
-{"version":3,"names":["nanoid","BaseRouter","getStateForAction","state","action","type","index","source","routes","findIndex","r","key","map","i","params","payload","history","nextState","length","some","route","routeNames","includes","name","stale","shouldActionChangeFocus"],"sourceRoot":"../../src","sources":["BaseRouter.tsx"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAmB;AAQ1C;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAG;EACxBC,iBAAiBA,CACfC,KAAY,EACZC,MAA8B,EACM;IACpC,QAAQA,MAAM,CAACC,IAAI;MACjB,KAAK,YAAY;MACjB,KAAK,gBAAgB;QAAE;UACrB,MAAMC,KAAK,GAAGF,MAAM,CAACG,MAAM,GACvBJ,KAAK,CAACK,MAAM,CAACC,SAAS,CAAEC,CAAC,IAAKA,CAAC,CAACC,GAAG,KAAKP,MAAM,CAACG,MAAM,CAAC,GACtDJ,KAAK,CAACG,KAAK;UAEf,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO,IAAI;UACb;UAEA,OAAO;YACL,GAAGH,KAAK;YACRK,MAAM,EAAEL,KAAK,CAACK,MAAM,CAACI,GAAG,CAAC,CAACF,CAAC,EAAEG,CAAC,KAC5BA,CAAC,KAAKP,KAAK,GACP;cACE,GAAGI,CAAC;cACJI,MAAM,EACJV,MAAM,CAACC,IAAI,KAAK,gBAAgB,GAC5BD,MAAM,CAACW,OAAO,CAACD,MAAM,GACrB;gBAAE,GAAGJ,CAAC,CAACI,MAAM;gBAAE,GAAGV,MAAM,CAACW,OAAO,CAACD;cAAO;YAChD,CAAC,GACDJ,CACN;UACF,CAAC;QACH;MAEA,KAAK,aAAa;QAAE;UAClB,MAAMJ,KAAK,GAAGF,MAAM,CAACG,MAAM,GACvBJ,KAAK,CAACK,MAAM,CAACC,SAAS,CAAEC,CAAC,IAAKA,CAAC,CAACC,GAAG,KAAKP,MAAM,CAACG,MAAM,CAAC,GACtDJ,KAAK,CAACG,KAAK;UAEf,IAAIA,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO,IAAI;UACb;UAEA,OAAO;YACL,GAAGH,KAAK;YACRK,MAAM,EAAEL,KAAK,CAACK,MAAM,CAACI,GAAG,CAAC,CAACF,CAAC,EAAEG,CAAC,KAC5BA,CAAC,KAAKP,KAAK,GACP;cACE,GAAGI,CAAC;cACJI,MAAM,EAAEV,MAAM,CAACW,OAAO,CAACD,MAAM;cAC7BE,OAAO,EAAE,CACP,IAAIN,CAAC,CAACM,OAAO,IAAI,EAAE,CAAC,EACpB;gBAAEX,IAAI,EAAE,QAAQ;gBAAES,MAAM,EAAEJ,CAAC,CAACI;cAAO,CAAC;YAExC,CAAC,GACDJ,CACN;UACF,CAAC;QACH;MAEA,KAAK,OAAO;QAAE;UACZ,MAAMO,SAAS,GAAGb,MAAM,CAACW,OAAsC;UAE/D,IACEE,SAAS,CAACT,MAAM,CAACU,MAAM,KAAK,CAAC,IAC7BD,SAAS,CAACT,MAAM,CAACW,IAAI,CAClBC,KAAuB,IAAK,CAACjB,KAAK,CAACkB,UAAU,CAACC,QAAQ,CAACF,KAAK,CAACG,IAAI,CACpE,CAAC,EACD;YACA,OAAO,IAAI;UACb;UAEA,IAAIN,SAAS,CAACO,KAAK,KAAK,KAAK,EAAE;YAC7B,IACErB,KAAK,CAACkB,UAAU,CAACH,MAAM,KAAKD,SAAS,CAACI,UAAU,CAACH,MAAM,IACvDD,SAAS,CAACI,UAAU,CAACF,IAAI,CACtBI,IAAI,IAAK,CAACpB,KAAK,CAACkB,UAAU,CAACC,QAAQ,CAACC,IAAI,CAC3C,CAAC,EACD;cACA,OAAO,IAAI;YACb;YAEA,OAAO;cACL,GAAGN,SAAS;cACZT,MAAM,EAAES,SAAS,CAACT,MAAM,CAACI,GAAG,CAAEQ,KAAK,IACjCA,KAAK,CAACT,GAAG,GAAGS,KAAK,GAAG;gBAAE,GAAGA,KAAK;gBAAET,GAAG,EAAE,GAAGS,KAAK,CAACG,IAAI,IAAIvB,MAAM,CAAC,CAAC;cAAG,CACnE;YACF,CAAC;UACH;UAEA,OAAOiB,SAAS;QAClB;MAEA;QACE,OAAO,IAAI;IACf;EACF,CAAC;EAEDQ,uBAAuBA,CAACrB,MAA8B,EAAE;IACtD,OAAOA,MAAM,CAACC,IAAI,KAAK,UAAU;EACnC;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["nanoid","BaseRouter","getStateForAction","state","action","type","index","source","routes","findIndex","r","key","map","i","params","payload","history","nextState","routeNamesSet","Set","routeNames","length","some","route","has","name","stale","shouldActionChangeFocus"],"sourceRoot":"../../src","sources":["BaseRouter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/CommonActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["goBack","type","navigate","args","name","params","options","payload","merge","pop","Error","reset","state","setParams","replaceParams","pushParams","preload"],"sourceRoot":"../../src","sources":["CommonActions.tsx"],"mappings":";;AA2EA,OAAO,SAASA,MAAMA,CAAA,EAAW;EAC/B,OAAO;IAAEC,IAAI,EAAE;EAAU,CAAC;AAC5B;AAmBA,OAAO,SAASC,QAAQA,CAAC,GAAGC,IAAS,EAAU;EAC7C,IAAI,OAAOA,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;IAC/B,MAAM,CAACC,IAAI,EAAEC,MAAM,EAAEC,OAAO,CAAC,GAAGH,IAAI;IAEpC,OAAO;MACLF,IAAI,EAAE,UAAU;MAChBM,OAAO,EAAE;QACPH,IAAI;QACJC,MAAM;QACNG,KAAK,EAAEF,OAAO,EAAEE,KAAK;QACrBC,GAAG,EAAEH,OAAO,EAAEG;MAChB;IACF,CAAC;EACH,CAAC,MAAM;IACL,MAAMF,OAAO,GAAGJ,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,EAAE,MAAM,IAAII,OAAO,CAAC,EAAE;MACxB,MAAM,IAAIG,KAAK,CACb,8JACF,CAAC;IACH;IAEA,OAAO;MAAET,IAAI,EAAE,UAAU;MAAEM;IAAQ,CAAC;EACtC;AACF;AAEA,OAAO,SAASI,KAAKA,CAACC,KAA6B,EAAE;EACnD,OAAO;IAAEX,IAAI,EAAE,OAAO;IAAEM,OAAO,EAAEK;EAAM,CAAC;AAC1C;AAEA,OAAO,SAASC,SAASA,CAACR,MAAc,EAAE;EACxC,OAAO;IACLJ,IAAI,EAAE,YAAY;IAClBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASS,aAAaA,CAACT,MAAc,EAAE;EAC5C,OAAO;IACLJ,IAAI,EAAE,gBAAgB;IACtBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASU,UAAUA,CAACV,MAAc,EAAE;EACzC,OAAO;IACLJ,IAAI,EAAE,aAAa;IACnBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASW,OAAOA,CAACZ,IAAY,EAAEC,MAAe,EAAE;EACrD,OAAO;IACLJ,IAAI,EAAE,SAAS;IACfM,OAAO,EAAE;MAAEH,IAAI;MAAEC;IAAO;EAC1B,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["goBack","type","navigate","args","name","params","options","payload","merge","pop","Error","reset","state","setParams","replaceParams","pushParams","preload"],"sourceRoot":"../../src","sources":["CommonActions.tsx"],"mappings":";;AA2EA,OAAO,SAASA,MAAMA,CAAA,EAAW;EAC/B,OAAO;IAAEC,IAAI,EAAE;EAAU,CAAC;AAC5B;AAqBA,OAAO,SAASC,QAAQA,CAAC,GAAGC,IAAS,EAAU;EAC7C,IAAI,OAAOA,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;IAC/B,MAAM,CAACC,IAAI,EAAEC,MAAM,EAAEC,OAAO,CAAC,GAAGH,IAAI;IAEpC,OAAO;MACLF,IAAI,EAAE,UAAU;MAChBM,OAAO,EAAE;QACPH,IAAI;QACJC,MAAM;QACNG,KAAK,EAAEF,OAAO,EAAEE,KAAK;QACrBC,GAAG,EAAEH,OAAO,EAAEG;MAChB;IACF,CAAC;EACH,CAAC,MAAM;IACL,MAAMF,OAAO,GAAGJ,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,EAAE,MAAM,IAAII,OAAO,CAAC,EAAE;MACxB,MAAM,IAAIG,KAAK,CACb,8JACF,CAAC;IACH;IAEA,OAAO;MAAET,IAAI,EAAE,UAAU;MAAEM;IAAQ,CAAC;EACtC;AACF;AAEA,OAAO,SAASI,KAAKA,CAACC,KAAiB,EAAE;EACvC,OAAO;IAAEX,IAAI,EAAE,OAAO;IAAEM,OAAO,EAAEK;EAAM,CAAC;AAC1C;AAEA,OAAO,SAASC,SAASA,CAACR,MAAc,EAAE;EACxC,OAAO;IACLJ,IAAI,EAAE,YAAY;IAClBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASS,aAAaA,CAACT,MAAc,EAAE;EAC5C,OAAO;IACLJ,IAAI,EAAE,gBAAgB;IACtBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASU,UAAUA,CAACV,MAAc,EAAE;EACzC,OAAO;IACLJ,IAAI,EAAE,aAAa;IACnBM,OAAO,EAAE;MAAEF;IAAO;EACpB,CAAC;AACH;AAEA,OAAO,SAASW,OAAOA,CAACZ,IAAY,EAAEC,MAA2B,EAAE;EACjE,OAAO;IACLJ,IAAI,EAAE,SAAS;IACfM,OAAO,EAAE;MAAEH,IAAI;MAAEC;IAAO;EAC1B,CAAC;AACH","ignoreList":[]}

package/lib/module/StackRouter.js

@@ -45,8 +45,50 @@ export const StackActions = {
         merge: options?.merge
       }
     };
+  },
+  retain(enable) {
+    return {
+      type: 'RETAIN',
+      payload: {
+        enable
+      }
+    };
   }
 };
+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 = {
     ...BaseRouter,
@@ -62,7 +104,7 @@ export function StackRouter(options) {
         key: `stack-${nanoid()}`,
         index: 0,
         routeNames,
-        preloadedRoutes: [],
+        retainedRouteKeys: [],
         routes: [{
           key: `${initialRouteName}-${nanoid()}`,
           name: initialRouteName,
@@ -86,14 +128,6 @@ 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];
         routes.push({
@@ -102,14 +136,17 @@ export function StackRouter(options) {
           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,7 +154,9 @@ 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];
         routes.push({
@@ -126,32 +165,33 @@ export function StackRouter(options) {
           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);
+      const routes = getActiveRoutes(state);
+      const index = routes.findIndex(r => r.key === key);
       if (index === -1 || index === state.index) {
         return state;
       }
-      return {
-        ...state,
-        index,
-        routes: state.routes.slice(0, index + 1)
-      };
+      return retainRoutes(state, getStateWithRoutes(state, routes.slice(0, index + 1)));
     },
     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;
+            const currentIndex = action.target === state.key && action.source ? routes.findIndex(r => r.key === action.source) : state.index;
             if (currentIndex === -1) {
               return null;
             }
@@ -163,8 +203,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 +212,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':
@@ -190,22 +237,55 @@ export function StackRouter(options) {
               params: action.payload.params
             });
             let route;
-            if (id !== undefined) {
-              route = state.routes.findLast(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            } else if (action.type === 'NAVIGATE') {
-              const currentRoute = state.routes[state.index];
-
-              // 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);
+            if (action.type === 'NAVIGATE') {
+              const currentRoute = 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 = routes.length - 1; i >= 0; i--) {
+                    const r = routes[i];
+                    if (r.name !== action.payload.name) {
+                      continue;
+                    }
+                    if (id === getId?.({
+                      params: r.params
+                    })) {
+                      route = r;
+                      break;
+                    }
+                    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
+                        })) {
+                          route = {
+                            ...r,
+                            params: r.history[j].params,
+                            history: r.history.slice(0, j)
+                          };
+                          break;
+                        }
+                      }
+                      if (route) {
+                        break;
+                      }
+                    }
+                  }
+                }
+              } 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 = routes.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
               }));
             }
@@ -222,50 +302,55 @@ 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) {
+                for (const r of routes) {
                   if (r.key === route.key) {
-                    routes.push({
+                    nextRoutes.push({
                       ...route,
                       path: action.payload.path !== undefined ? action.payload.path : route.path,
                       params
                     });
                     break;
                   }
-                  routes.push(r);
+                  nextRoutes.push(r);
+                }
+                if (!nextRoutes.some(r => r.key === route.key)) {
+                  nextRoutes.push({
+                    ...route,
+                    path: action.payload.path !== undefined ? action.payload.path : route.path,
+                    params
+                  });
                 }
               } else {
-                routes = state.routes.filter(r => r.key !== route.key);
-                routes.push({
+                nextRoutes = routes.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 = [...routes, {
                 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, preloadedRoutes.filter(route => nextRoutes[nextRoutes.length - 1].key !== route.key)));
           }
         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.target === state.key && action.source ? routes.findIndex(r => r.key === action.source) : state.index;
+            if (currentIndex === -1) {
+              return null;
+            }
+            let route = routes[currentIndex];
 
             /**
              * When popping entries,
@@ -278,42 +363,38 @@ export function StackRouter(options) {
              */
             if (route.history?.length || currentIndex > 0) {
               let count = action.payload.count;
-              let routes = state.routes;
+              let nextRoutes = routes;
               while (count > 0 && (route.history?.length || currentIndex > 0)) {
                 if (route.history?.length) {
-                  routes = [...routes];
+                  nextRoutes = [...nextRoutes];
                   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] = {
+                  nextRoutes[currentIndex] = {
                     ...route,
                     params: last?.type === 'params' ? last.params : route.params,
                     history
                   };
                 }
                 if (currentIndex > 0 && count > 0) {
-                  const length = routes.length;
+                  const length = nextRoutes.length;
                   const end = Math.max(currentIndex - count + 1, 1);
-                  routes = routes.slice(0, end).concat(routes.slice(currentIndex + 1));
-                  const removed = length - routes.length;
+                  nextRoutes = nextRoutes.slice(0, end).concat(nextRoutes.slice(currentIndex + 1));
+                  const removed = length - nextRoutes.length;
                   count = count - removed;
-                  currentIndex = routes.length - 1;
-                  route = routes[currentIndex];
+                  currentIndex = nextRoutes.length - 1;
+                  route = nextRoutes[currentIndex];
                 }
               }
-              return {
-                ...state,
-                index: routes.length - 1,
-                routes
-              };
+              return retainRoutes(state, getStateWithRoutes(state, nextRoutes));
             }
             return null;
           }
         case 'POP_TO_TOP':
           {
-            let route = state.routes[0];
+            let route = routes[0];
             if (state.index > 0 || route.history?.length) {
               if (route.history?.length) {
                 route = {
@@ -321,17 +402,13 @@ 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;
+            const currentIndex = action.target === state.key && action.source ? routes.findLastIndex(r => r.key === action.source) : state.index;
             if (currentIndex === -1) {
               return null;
             }
@@ -341,19 +418,43 @@ export function StackRouter(options) {
 
             // If the route already exists, navigate to it
             let index = -1;
+            let historyIndex;
             const getId = options.routeGetIdList[action.payload.name];
             const id = getId?.({
               params: action.payload.params
             });
             if (id !== undefined) {
-              index = state.routes.findIndex(route => route.name === action.payload.name && id === getId?.({
-                params: route.params
-              }));
-            } else if (state.routes[currentIndex].name === action.payload.name) {
+              for (let i = currentIndex; i >= 0; i--) {
+                const r = routes[i];
+                if (r.name !== action.payload.name) {
+                  continue;
+                }
+                if (id === getId?.({
+                  params: r.params
+                })) {
+                  index = i;
+                  break;
+                }
+                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
+                    })) {
+                      index = i;
+                      historyIndex = j;
+                      break;
+                    }
+                  }
+                  if (index !== -1) {
+                    break;
+                  }
+                }
+              }
+            } else if (routes[currentIndex].name === action.payload.name) {
               index = currentIndex;
             } else {
               for (let i = currentIndex; i >= 0; i--) {
-                if (state.routes[i].name === action.payload.name) {
+                if (routes[i].name === action.payload.name) {
                   index = i;
                   break;
                 }
@@ -362,8 +463,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) {
@@ -371,40 +472,49 @@ 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];
+            let baseParams = route.params;
+            let history = route.history;
+            if (historyIndex !== undefined && route.history) {
+              baseParams = route.history[historyIndex].params;
+              history = route.history.slice(0, historyIndex);
             }
-            const route = state.routes[index];
             let params;
             if (action.payload.merge) {
               params = action.payload.params !== undefined || routeParamList[route.name] !== undefined ? {
                 ...routeParamList[route.name],
-                ...route.params,
+                ...baseParams,
                 ...action.payload.params
-              } : route.params;
+              } : baseParams;
             } else {
               params = createParamsFromAction({
                 action,
                 routeParamList
               });
             }
-            return {
-              ...state,
-              index,
-              routes: [...state.routes.slice(0, index), params !== route.params ? {
-                ...route,
-                params
-              } : state.routes[index]]
-            };
+            return retainRoutes(state, getStateWithRoutes(state, [...routes.slice(0, index), params !== baseParams || historyIndex !== undefined ? {
+              ...route,
+              params,
+              history
+            } : routes[index]]));
           }
         case 'GO_BACK':
-          if (state.index > 0 || state.routes[state.index].history?.length) {
+          if (state.index > 0 || routes[state.index].history?.length) {
             return router.getStateForAction(state, {
               type: 'POP',
               payload: {
@@ -415,45 +525,55 @@ export function StackRouter(options) {
             }, options);
           }
           return null;
+        case 'RETAIN':
+          {
+            const routeKey = action.source ?? routes[state.index].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 === undefined || 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);