Provide non-dynamic segments to catch-all parallel routes

packages/next/src/server/app-render/app-render.tsx

@@ -207,6 +207,7 @@ export type CreateSegmentPath = (child: FlightSegmentPath) => FlightSegmentPath
  */
 function makeGetDynamicParamFromSegment(
   params: { [key: string]: any },
+  pagePath: string,
   flightRouterState: FlightRouterState | undefined
 ): GetDynamicParamFromSegment {
   return function getDynamicParamFromSegment(
@@ -239,11 +240,19 @@ function makeGetDynamicParamFromSegment(
         segmentParam.type === 'optional-catchall' ||
         segmentParam.type === 'catchall'
       ) {
-        // If we weren't able to match the segment to a URL param, and we have a catch-all route,
-        // provide all of the known params (in array format) to the route
-        // It should be safe to assume the order of these params is consistent with the order of the segments.
-        // However, if not, we could re-parse the `pagePath` with `getRouteRegex` and iterate over the positional order.
-        value = Object.values(params).map((i) => encodeURIComponent(i))
+        // derive the value from the page path, replacing any dynamic params with the actual values
+        value = pagePath
+          .split('/')
+          .slice(1)
+          .map((part) => {
+            const match = /^\[(.+)\]$/.exec(part)
+
+            if (match) {
+              return params[match[1]]
+            }
+
+            return part
+          })
         const hasValues = value.length > 0
         const type = dynamicParamTypes[segmentParam.type]
         return {
@@ -795,6 +804,7 @@ async function renderToHTMLOrFlightImpl(
 
   const getDynamicParamFromSegment = makeGetDynamicParamFromSegment(
     params,
+    pagePath,
     // `FlightRouterState` is unconditionally provided here because this method uses it
     // to extract dynamic params as a fallback if they're not present in the path.
     parsedFlightRouterState

test/e2e/app-dir/parallel-routes-breadcrumbs/app/@slot/[...catchAll]/page.tsx

@@ -1,4 +1,4 @@
-export default function Page({ params: { catchAll } }) {
+export default function Page({ params: { catchAll = [] } }) {
   return (
     <div id="slot">
       <h1>Parallel Route!</h1>

test/e2e/app-dir/parallel-routes-breadcrumbs/app/foo/[lang]/bar/page.tsx

@@ -0,0 +1,7 @@
+export default function StaticPage() {
+  return (
+    <div>
+      <h2>/foo/[lang]/bar Page!</h2>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-breadcrumbs/parallel-routes-breadcrumbs.test.ts

@@ -44,4 +44,19 @@ describe('parallel-routes-breadcrumbs', () => {
     expect(await slot.text()).toContain('Album: album2')
     expect(await slot.text()).toContain('Track: track3')
   })
+
+  it('should render the breadcrumbs correctly with the non-dynamic route segments', async () => {
+    const browser = await next.browser('/foo/en/bar')
+    const slot = await browser.waitForElementByCss('#slot')
+
+    expect(await browser.elementByCss('h1').text()).toBe('Parallel Route!')
+    expect(await browser.elementByCss('h2').text()).toBe(
+      '/foo/[lang]/bar Page!'
+    )
+
+    // verify slot is rendering the params
+    expect(await slot.text()).toContain('Artist: foo')
+    expect(await slot.text()).toContain('Album: en')
+    expect(await slot.text()).toContain('Track: bar')
+  })
 })