Merge pull request #31524 from yatishgoel/fix/storybook-nextjs-array-params

Core: Support array-based catch-all Next.js route segments in AppRouterProvider

Author: valentinpalkovic

code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx

@@ -48,7 +48,7 @@ function getSelectedParams(currentTree: FlightRouterState, params: Params = {}):
     const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc');
 
     if (isCatchAll) {
-      params[segment[0]] = segment[1].split('/');
+      params[segment[0]] = Array.isArray(segment[1]) ? segment[1] : segment[1].split('/');
     } else if (isDynamicParameter) {
       params[segment[0]] = segment[1];
     }
@@ -77,8 +77,33 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
 
   const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];
   const pathParams = useMemo(() => {
-    return getSelectedParams(tree);
-  }, [tree]);
+    const params: Params = {};
+    const currentSegments = routeParams.segments;
+
+    if (currentSegments) {
+      if (Array.isArray(currentSegments)) {
+        for (const segmentEntry of currentSegments) {
+          if (
+            Array.isArray(segmentEntry) &&
+            segmentEntry.length === 2 &&
+            typeof segmentEntry[0] === 'string'
+          ) {
+            const key: string = segmentEntry[0];
+            const value = segmentEntry[1] as string | string[] | undefined;
+            params[key] = value;
+          }
+        }
+      } else if (typeof currentSegments === 'object' && !Array.isArray(currentSegments)) {
+        const segmentObject = currentSegments as Record<string, string | string[] | undefined>;
+        for (const key in segmentObject) {
+          if (Object.prototype.hasOwnProperty.call(segmentObject, key)) {
+            params[key] = segmentObject[key];
+          }
+        }
+      }
+    }
+    return params;
+  }, [routeParams.segments]);
 
   const newLazyCacheNode = {
     lazyData: null,

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -48,7 +48,7 @@ function getSelectedParams(currentTree: FlightRouterState, params: Params = {}):
     const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc');
 
     if (isCatchAll) {
-      params[segment[0]] = segment[1].split('/');
+      params[segment[0]] = Array.isArray(segment[1]) ? segment[1] : segment[1].split('/');
     } else if (isDynamicParameter) {
       params[segment[0]] = segment[1];
     }
@@ -77,8 +77,33 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
 
   const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];
   const pathParams = useMemo(() => {
-    return getSelectedParams(tree);
-  }, [tree]);
+    const params: Params = {};
+    const currentSegments = routeParams.segments;
+
+    if (currentSegments) {
+      if (Array.isArray(currentSegments)) {
+        for (const segmentEntry of currentSegments) {
+          if (
+            Array.isArray(segmentEntry) &&
+            segmentEntry.length === 2 &&
+            typeof segmentEntry[0] === 'string'
+          ) {
+            const key: string = segmentEntry[0];
+            const value = segmentEntry[1] as string | string[] | undefined;
+            params[key] = value;
+          }
+        }
+      } else if (typeof currentSegments === 'object' && !Array.isArray(currentSegments)) {
+        const segmentObject = currentSegments as Record<string, string | string[] | undefined>;
+        for (const key in segmentObject) {
+          if (Object.prototype.hasOwnProperty.call(segmentObject, key)) {
+            params[key] = segmentObject[key];
+          }
+        }
+      }
+    }
+    return params;
+  }, [routeParams.segments]);
 
   const newLazyCacheNode = {
     lazyData: null,