@react-navigation/routers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/src/TabRouter.tsx

@@ -14,9 +14,9 @@ import type {
 
 export type TabActionType = {
   type: 'JUMP_TO';
-  payload: { name: string; params?: object };
-  source?: string;
-  target?: string;
+  payload: { name: string; params?: object | undefined };
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 export type BackBehavior =
@@ -37,7 +37,7 @@ export type TabRouterOptions = DefaultRouterOptions & {
    * - `fullHistory` - return to last visited route; doesn't drop duplicate entries unlike `history` - matches behavior of web pages
    * - `none` - do not handle going back
    */
-  backBehavior?: BackBehavior;
+  backBehavior?: BackBehavior | undefined;
 };
 
 export type TabNavigationState<ParamList extends ParamListBase> = Omit<
@@ -91,10 +91,16 @@ const getRouteHistory = (
   backBehavior: BackBehavior,
   initialRouteName: string | undefined
 ) => {
+  const route = routes[index];
+
+  if (route == null) {
+    throw new Error(`Couldn't find a route at index ${index}.`);
+  }
+
   const history = [
     {
       type: TYPE_ROUTE,
-      key: routes[index].key,
+      key: route.key,
     },
   ];
 
@@ -103,17 +109,29 @@ const getRouteHistory = (
   switch (backBehavior) {
     case 'order':
       for (let i = index; i > 0; i--) {
+        const route = routes[i - 1];
+
+        if (route == null) {
+          throw new Error(`Couldn't find a route at index ${i - 1}.`);
+        }
+
         history.unshift({
           type: TYPE_ROUTE,
-          key: routes[i - 1].key,
+          key: route.key,
         });
       }
       break;
     case 'firstRoute':
       if (index !== 0) {
+        const route = routes[0];
+
+        if (route == null) {
+          throw new Error("Couldn't find a route at index 0.");
+        }
+
         history.unshift({
           type: TYPE_ROUTE,
-          key: routes[0].key,
+          key: route.key,
         });
       }
       break;
@@ -124,9 +142,17 @@ const getRouteHistory = (
       initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;
 
       if (index !== initialRouteIndex) {
+        const route = routes[initialRouteIndex];
+
+        if (route == null) {
+          throw new Error(
+            `Couldn't find a route at index ${initialRouteIndex}.`
+          );
+        }
+
         history.unshift({
           type: TYPE_ROUTE,
-          key: routes[initialRouteIndex].key,
+          key: route.key,
         });
       }
       break;
@@ -150,6 +176,10 @@ const changeIndex = (
   if (backBehavior === 'history' || backBehavior === 'fullHistory') {
     const currentRoute = state.routes[index];
 
+    if (currentRoute == null) {
+      throw new Error(`Couldn't find a route at index ${index}.`);
+    }
+
     if (backBehavior === 'history') {
       // Remove the existing key from the history to de-duplicate it
       history = history.filter((it) =>
@@ -266,8 +296,9 @@ export function TabRouter({
         } as Route<string>;
       });
 
+      const currentRoute = state.routes[state.index ?? 0];
       const index = Math.min(
-        Math.max(routeNames.indexOf(state.routes[state?.index ?? 0]?.name), 0),
+        Math.max(currentRoute ? routeNames.indexOf(currentRoute.name) : 0, 0),
         routes.length - 1
       );
 
@@ -311,10 +342,13 @@ export function TabRouter({
           }
       );
 
-      const index = Math.max(
-        0,
-        routeNames.indexOf(state.routes[state.index].name)
-      );
+      const currentRoute = state.routes[state.index];
+
+      if (currentRoute == null) {
+        throw new Error(`Couldn't find a route at index ${state.index}.`);
+      }
+
+      const index = Math.max(0, routeNames.indexOf(currentRoute.name));
 
       let history = state.history.filter(
         // Type will always be 'route' for tabs, but could be different in a router extending this (e.g. drawer)
@@ -414,10 +448,18 @@ export function TabRouter({
             initialRouteName
           );
 
+          const updatedRoute = updatedState.routes[updatedState.index];
+
+          if (updatedRoute == null) {
+            throw new Error(
+              `Couldn't find a route at index ${updatedState.index}.`
+            );
+          }
+
           return {
             ...updatedState,
             preloadedRouteKeys: updatedState.preloadedRouteKeys.filter(
-              (key) => key !== state.routes[updatedState.index].key
+              (key) => key !== updatedRoute.key
             ),
           };
         }
@@ -425,6 +467,10 @@ export function TabRouter({
         case 'GO_BACK': {
           const focusedRoute = state.routes[state.index];
 
+          if (focusedRoute == null) {
+            throw new Error(`Couldn't find a route at index ${state.index}.`);
+          }
+
           if (state.history.length === 1 && !focusedRoute.history?.length) {
             return null;
           }
@@ -453,7 +499,12 @@ export function TabRouter({
           }
 
           const previousHistoryItem = state.history[state.history.length - 2];
-          const previousKey = previousHistoryItem?.key;
+
+          if (previousHistoryItem == null) {
+            return null;
+          }
+
+          const previousKey = previousHistoryItem.key;
           const index = state.routes.findLastIndex(
             (route) => route.key === previousKey
           );
@@ -464,13 +515,19 @@ export function TabRouter({
 
           let routes = state.routes;
 
+          const previousRoute = routes[index];
+
+          if (previousRoute == null) {
+            throw new Error(`Couldn't find a route at index ${index}.`);
+          }
+
           if (
             backBehavior === 'fullHistory' &&
-            routes[index].params !== previousHistoryItem.params
+            previousRoute.params !== previousHistoryItem.params
           ) {
             routes = [...state.routes];
             routes[index] = {
-              ...routes[index],
+              ...previousRoute,
               params: previousHistoryItem.params,
             };
           }
@@ -479,7 +536,7 @@ export function TabRouter({
             ...state,
             routes,
             preloadedRouteKeys: state.preloadedRouteKeys.filter(
-              (key) => key !== state.routes[index].key
+              (key) => key !== previousRoute.key
             ),
             history: state.history.slice(0, -1),
             index,
@@ -497,6 +554,10 @@ export function TabRouter({
 
           const route = state.routes[routeIndex];
 
+          if (route == null) {
+            throw new Error(`Couldn't find a route at index ${routeIndex}.`);
+          }
+
           const getId = routeGetIdList[route.name];
 
           const currentId = getId?.({ params: route.params });

package/src/createParamsFromAction.tsx

@@ -4,7 +4,7 @@ type Options = {
   action: {
     payload: {
       name: string;
-      params?: object;
+      params?: object | undefined;
     };
   };
   routeParamList: ParamListBase;

package/src/createRouteFromAction.tsx

@@ -7,7 +7,7 @@ type Options = {
   action: {
     payload: {
       name: string;
-      params?: object;
+      params?: object | undefined;
     };
   };
   routeParamList: ParamListBase;

package/src/types.tsx

@@ -6,7 +6,7 @@ export type NavigationRoute<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
-  state?: NavigationState | PartialState<NavigationState>;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
 };
 
 export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
@@ -26,7 +26,7 @@ export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
     /**
      * Alternative entries for history.
      */
-    history?: unknown[];
+    history?: unknown[] | undefined;
     /**
      * List of rendered routes.
      */
@@ -45,20 +45,22 @@ export type NavigationState<ParamList extends ParamListBase = ParamListBase> =
 
 export type InitialState = Readonly<
   Partial<Omit<NavigationState, 'stale' | 'routes'>> & {
-    routes: (Omit<Route<string>, 'key'> & { state?: InitialState })[];
+    routes: (Omit<Route<string>, 'key'> & {
+      state?: InitialState | undefined;
+    })[];
   }
 >;
 
 export type PartialRoute<R extends Route<string>> = Omit<R, 'key'> & {
-  key?: string;
-  state?: PartialState<NavigationState>;
+  key?: string | undefined;
+  state?: PartialState<NavigationState> | undefined;
 };
 
 export type PartialState<State extends NavigationState> = Partial<
   Omit<State, 'stale' | 'routes'>
 > &
   Readonly<{
-    stale?: true;
+    stale?: true | undefined;
     routes: PartialRoute<Route<State['routeNames'][number]>>[];
   }>;
 
@@ -79,26 +81,24 @@ export type Route<
      * Path associated with the route.
      * Usually present when the screen was opened from a deep link.
      */
-    path?: string;
+    path?: string | undefined;
     /**
      * History of param changes for this route.
      */
-    history?: { type: 'params'; params: object }[];
-  } & Readonly<
-    undefined extends Params
-      ? {
-          /**
-           * Params for this route
-           */
-          params?: Readonly<Params>;
-        }
-      : {
-          /**
-           * Params for this route
-           */
-          params: Readonly<Params>;
-        }
-  >
+    history?: { type: 'params'; params: object }[] | undefined;
+  } & (undefined extends Params
+    ? {
+        /**
+         * Params for this route
+         */
+        params?: Readonly<Params> | undefined;
+      }
+    : {
+        /**
+         * Params for this route
+         */
+        params: Readonly<Params>;
+      })
 >;
 
 export type ParamListBase = Record<string, object | undefined>;
@@ -111,15 +111,15 @@ export type NavigationAction = Readonly<{
   /**
    * Additional data for the action
    */
-  payload?: object;
+  payload?: object | undefined;
   /**
    * Key of the route which dispatched this action.
    */
-  source?: string;
+  source?: string | undefined;
   /**
    * Key of the navigator which should handle this action.
    */
-  target?: string;
+  target?: string | undefined;
 }>;
 
 export type ActionCreators<Action extends NavigationAction> = {
@@ -131,7 +131,7 @@ export type DefaultRouterOptions<RouteName extends string = string> = {
    * Name of the route to focus by on initial render.
    * If not specified, usually the first route is used.
    */
-  initialRouteName?: RouteName;
+  initialRouteName?: RouteName | undefined;
 };
 
 export type RouterFactory<
@@ -145,7 +145,9 @@ export type RouterConfigOptions = {
   routeParamList: ParamListBase;
   routeGetIdList: Record<
     string,
-    | ((options: { params?: Record<string, any> }) => string | undefined)
+    | ((options: {
+        params?: Record<string, any> | undefined;
+      }) => string | undefined)
     | undefined
   >;
 };
@@ -228,17 +230,6 @@ export type Router<
    */
   shouldActionChangeFocus(action: NavigationAction): boolean;
 
-  /**
-   * Get the list of routes from the navigation state.
-   *
-   * By default, `state.routes` is used.
-   * But in some cases (like `preloadedRoutes` in stack),
-   * the actual list of routes may be different.
-   *
-   * @param state Navigation state to get the routes from.
-   */
-  getRoutesFromState?(state: State): Route<string>[];
-
   /**
    * Action creators for the router.
    */