@react-navigation/core 7.17.3 → 7.17.5

package/src/getStateFromPath.tsx

@@ -29,6 +29,8 @@ type RouteConfig = {
   params: { screen: string; name?: string; index: number }[];
   routeNames: string[];
   parse?: ParseConfig;
+  explicitParamNames?: Set<string>;
+  hasNestedScreens: boolean;
 };
 
 type InitialRouteConfig = {
@@ -52,6 +54,21 @@ type ConfigResources = {
   configsByScreen: Record<string, RouteConfig[]>;
 };
 
+const NESTED_SCREEN_PARAM_NAMES = [
+  'screen',
+  'params',
+  'initial',
+  'path',
+  'merge',
+  'pop',
+];
+
+const getExplicitParamNames = (parse?: ParseConfig) => {
+  const names = Object.entries(parse ?? {}).map(([name]) => name);
+
+  return names.length ? new Set(names) : undefined;
+};
+
 /**
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
@@ -105,15 +122,23 @@ export function getStateFromPath<ParamList extends {}>(
     remaining = remaining.replace(normalizedPrefix, '');
   }
 
+  const decodedSegments: string[] = [];
+
+  for (const segment of remaining.split('/')) {
+    if (!segment) {
+      continue;
+    }
+
+    try {
+      decodedSegments.push(decodeURIComponent(segment));
+    } catch {
+      return undefined;
+    }
+  }
+
   if (screens === undefined) {
     // When no config is specified, use the path segments as route names
-    const routes = remaining
-      .split('/')
-      .filter(Boolean)
-      .map((segment) => {
-        const name = decodeURIComponent(segment);
-        return { name };
-      });
+    const routes = decodedSegments.map((name) => ({ name }));
 
     if (routes.length) {
       return createNestedStateObject(path, routes, initialRoutes);
@@ -132,36 +157,26 @@ export function getStateFromPath<ParamList extends {}>(
         path,
         match.routeNames.map((name) => ({ name })),
         initialRoutes,
-        configs
+        match
       );
     }
 
     return undefined;
   }
 
-  let result: PartialState<NavigationState> | undefined;
-  let current: PartialState<NavigationState> | undefined;
-
   // We match the whole path against the regex instead of segments
   // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-  const { routes, remainingPath } = matchAgainstConfigs(
+  const { routes, config } = matchAgainstConfigs(
     remaining,
     configs,
     configsByScreen
   );
 
-  if (routes !== undefined) {
-    // This will always be empty if full path matched
-    current = createNestedStateObject(path, routes, initialRoutes, configs);
-    remaining = remainingPath;
-    result = current;
-  }
-
-  if (current == null || result == null) {
+  if (routes === undefined || config === undefined) {
     return undefined;
   }
 
-  return result;
+  return createNestedStateObject(path, routes, initialRoutes, config);
 }
 
 /**
@@ -354,6 +369,7 @@ const matchAgainstConfigs = (
 ) => {
   let routes: ParsedRoute[] | undefined;
   let remainingPath = remaining;
+  let matchingConfig: RouteConfig | undefined;
 
   // Go through all configs, and see if the next path segment matches our regex
   for (const config of configs) {
@@ -365,50 +381,57 @@ const matchAgainstConfigs = (
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      routes = config.routeNames.map((routeName) => {
+      routes = [];
+      matchingConfig = config;
+
+      for (const routeName of config.routeNames) {
         // Check matching name AND pattern in case same screen is used at different levels in config
         const routeConfig = configsByScreen[routeName]?.find((c) =>
           arrayStartsWith(config.segments, c.segments)
         );
 
-        const params =
-          routeConfig && match.groups
-            ? Object.fromEntries(
-                Object.entries(match.groups)
-                  .map(([key, value]) => {
-                    const index = Number(key.replace('param_', ''));
-                    const param = routeConfig.params.find(
-                      (it) => it.index === index
-                    );
-
-                    if (param?.screen === routeName && param?.name) {
-                      return [param.name, value];
-                    }
-
-                    return null;
-                  })
-                  .filter((it) => it != null)
-                  .map(([key, value]) => {
-                    if (value == null) {
-                      return [key, undefined];
-                    }
-
-                    const decoded = decodeURIComponent(value);
-                    const parsed = routeConfig.parse?.[key]
-                      ? routeConfig.parse[key](decoded)
-                      : decoded;
-
-                    return [key, parsed];
-                  })
-              )
-            : undefined;
+        let params: Record<string, unknown> | undefined;
 
-        if (params && Object.keys(params).length) {
-          return { name: routeName, params };
+        if (routeConfig && match.groups) {
+          const paramEntries: [string, unknown][] = [];
+
+          for (const [key, value] of Object.entries(match.groups)) {
+            const index = Number(key.replace('param_', ''));
+            const param = routeConfig.params.find((it) => it.index === index);
+
+            if (param?.screen !== routeName || !param.name) {
+              continue;
+            }
+
+            if (value == null) {
+              paramEntries.push([param.name, undefined]);
+              continue;
+            }
+
+            let decoded: string;
+
+            try {
+              decoded = decodeURIComponent(value);
+            } catch {
+              return { routes: undefined, remainingPath };
+            }
+
+            const parser = routeConfig.parse?.[param.name];
+
+            paramEntries.push([param.name, parser ? parser(decoded) : decoded]);
+          }
+
+          if (paramEntries.length) {
+            params = Object.fromEntries(paramEntries);
+          }
         }
 
-        return { name: routeName };
-      });
+        if (params && Object.keys(params).length) {
+          routes.push({ name: routeName, params });
+        } else {
+          routes.push({ name: routeName });
+        }
+      }
 
       remainingPath = remainingPath.replace(match[0], '');
 
@@ -416,7 +439,7 @@ const matchAgainstConfigs = (
     }
   }
 
-  return { routes, remainingPath };
+  return { routes, remainingPath, config: matchingConfig };
 };
 
 const createNormalizedConfigs = (
@@ -442,6 +465,9 @@ const createNormalizedConfigs = (
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
+    const nestedScreens = config.screens;
+    const hasNestedScreens = !!nestedScreens;
+
     if (typeof config.path === 'string') {
       if (config.exact && config.path == null) {
         throw new Error(
@@ -461,7 +487,8 @@ const createNormalizedConfigs = (
                 screen,
                 [...routeNames],
                 [...paths, { screen, path: alias }],
-                config.parse
+                config.parse,
+                hasNestedScreens
               )
             );
           } else if (typeof alias === 'object') {
@@ -472,7 +499,8 @@ const createNormalizedConfigs = (
                 alias.exact
                   ? [{ screen, path: alias.path }]
                   : [...paths, { screen, path: alias.path }],
-                alias.parse
+                alias.parse,
+                hasNestedScreens
               )
             );
           }
@@ -487,7 +515,13 @@ const createNormalizedConfigs = (
 
       paths.push({ screen, path: config.path });
       configs.push(
-        createConfigItem(screen, [...routeNames], [...paths], config.parse)
+        createConfigItem(
+          screen,
+          [...routeNames],
+          [...paths],
+          config.parse,
+          hasNestedScreens
+        )
       );
 
       configs.push(...aliasConfigs);
@@ -503,7 +537,7 @@ const createNormalizedConfigs = (
       );
     }
 
-    if (config.screens) {
+    if (nestedScreens) {
       // property `initialRouteName` without `screens` has no purpose
       if (config.initialRouteName) {
         initials.push({
@@ -512,10 +546,10 @@ const createNormalizedConfigs = (
         });
       }
 
-      Object.keys(config.screens).forEach((nestedConfig) => {
+      Object.keys(nestedScreens).forEach((nestedConfig) => {
         const result = createNormalizedConfigs(
           nestedConfig,
-          config.screens as Record<string, string | PathConfig<ParamListBase>>,
+          nestedScreens as Record<string, string | PathConfig<ParamListBase>>,
           initials,
           [...paths],
           [...parentScreens],
@@ -536,7 +570,8 @@ const createConfigItem = (
   screen: string,
   routeNames: string[],
   paths: { screen: string; path: string }[],
-  parse?: ParseConfig
+  parse?: ParseConfig,
+  hasNestedScreens = false
 ): RouteConfig => {
   const parts: (PatternPart & { screen: string })[] = [];
 
@@ -581,22 +616,11 @@ const createConfigItem = (
     params,
     routeNames,
     parse,
+    explicitParamNames: getExplicitParamNames(parse),
+    hasNestedScreens,
   };
 };
 
-const findParseConfigForRoute = (
-  routeName: string,
-  flatConfig: RouteConfig[]
-): ParseConfig | undefined => {
-  for (const config of flatConfig) {
-    if (routeName === config.routeNames[config.routeNames.length - 1]) {
-      return config.parse;
-    }
-  }
-
-  return undefined;
-};
-
 // Try to find an initial route connected with the one passed
 const findInitialRoute = (
   routeName: string,
@@ -658,7 +682,7 @@ const createNestedStateObject = (
   path: string,
   routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[],
-  flatConfig?: RouteConfig[]
+  routeConfig?: RouteConfig
 ) => {
   let route = routes.shift() as ParsedRoute;
   const parentScreens: string[] = [];
@@ -702,7 +726,10 @@ const createNestedStateObject = (
 
   const params = parseQueryParams(
     path,
-    flatConfig ? findParseConfigForRoute(route.name, flatConfig) : undefined
+    routeConfig?.parse,
+    routeConfig?.explicitParamNames,
+    routeConfig?.hasNestedScreens,
+    route.params
   );
 
   if (params) {
@@ -714,7 +741,10 @@ const createNestedStateObject = (
 
 const parseQueryParams = (
   path: string,
-  parseConfig?: Record<string, (value: string) => unknown>
+  parseConfig?: ParseConfig,
+  explicitParamNames?: Set<string>,
+  hasNestedScreens = false,
+  routeParams?: Record<string, unknown>
 ) => {
   const query = path.split('?')[1];
   const params: Record<string, unknown> = queryString.parse(query);
@@ -730,5 +760,19 @@ const parseQueryParams = (
     });
   }
 
+  if (
+    hasNestedScreens &&
+    !explicitParamNames?.has('screen') &&
+    (typeof params.screen === 'string' ||
+      typeof routeParams?.screen === 'string')
+  ) {
+    for (const name of NESTED_SCREEN_PARAM_NAMES) {
+      if (!explicitParamNames?.has(name)) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete params[name];
+      }
+    }
+  }
+
   return Object.keys(params).length ? params : undefined;
 };

package/src/useNavigationBuilder.tsx

@@ -63,6 +63,14 @@ type NavigatorRoute = {
   params?: NavigatorScreenParams<ParamListBase>;
 };
 
+const isNavigationState = (
+  state: unknown
+): state is NavigationState | PartialState<NavigationState> =>
+  state != null &&
+  typeof state === 'object' &&
+  'routes' in state &&
+  Array.isArray(state.routes);
+
 const isScreen = (
   child: React.ReactElement<unknown>
 ): child is React.ReactElement<{
@@ -279,8 +287,10 @@ const getRouteConfigsFromChildren = <
 };
 
 const getStateFromParams = (params: NavigatorRoute['params']) => {
-  if (params?.state != null) {
-    return params.state;
+  const state = params?.state;
+
+  if (isNavigationState(state)) {
+    return state;
   } else if (typeof params?.screen === 'string' && params?.initial !== false) {
     return {
       routes: [
@@ -647,24 +657,21 @@ export function useNavigationBuilder<
 
   if (route?.params && !didConsumeNestedParams) {
     let action: CommonActions.Action | undefined;
+    const stateFromParams = route.params.state;
 
-    if (
-      typeof route.params.state === 'object' &&
-      route.params.state != null &&
-      !isNestedParamsConsumed
-    ) {
+    if (isNavigationState(stateFromParams) && !isNestedParamsConsumed) {
       didConsumeNestedParams = true;
 
       if (
         options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
-        doesStateHaveOnlyInvalidRoutes(route.params.state)
+        doesStateHaveOnlyInvalidRoutes(stateFromParams)
       ) {
-        if (route.params.state !== unhandledState) {
-          setUnhandledState(route.params.state);
+        if (stateFromParams !== unhandledState) {
+          setUnhandledState(stateFromParams);
         }
       } else {
         // If the route was updated with new state, we should reset to it
-        action = CommonActions.reset(route.params.state);
+        action = CommonActions.reset(stateFromParams);
       }
     } else if (
       typeof route.params.screen === 'string' &&