parallel routes: fix incorrect optimistic tree when there are multiple parallel routes

packages/next/src/client/components/router-reducer/create-optimistic-tree.ts

@@ -17,15 +17,26 @@ export function createOptimisticTree(
 
   const segmentMatches =
     existingSegment !== null && matchSegment(existingSegment, segment)
-  const shouldRefetchThisLevel = !flightRouterState || !segmentMatches
+
+  // if there are multiple parallel routes at this level, we need to refetch here
+  // to ensure we get the correct tree. This is because we don't know which
+  // parallel route will match the next segment.
+  const hasMultipleParallelRoutes =
+    Object.keys(existingParallelRoutes).length > 1
+  const shouldRefetchThisLevel =
+    !flightRouterState || !segmentMatches || hasMultipleParallelRoutes
 
   let parallelRoutes: FlightRouterState[1] = {}
   if (existingSegment !== null && segmentMatches) {
     parallelRoutes = existingParallelRoutes
   }
 
   let childTree
-  if (!isLastSegment) {
+
+  // if there's multiple parallel routes at this level, we shouldn't create an
+  // optimistic tree for the next level because we don't know which one will
+  // match the next segment.
+  if (!isLastSegment && !hasMultipleParallelRoutes) {
     const childItem = createOptimisticTree(
       segments.slice(1),
       parallelRoutes ? parallelRoutes.children : null,

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-prefetch-false/@parallel/default.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Page() {
+  return <div id="default-parallel">default view for parallel</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-prefetch-false/@parallel/foo/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Page() {
+  return <div id="parallel-foo">parallel for foo</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-prefetch-false/default.tsx

@@ -0,0 +1 @@
+export default () => null

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-prefetch-false/layout.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Layout({ children, parallel }) {
+  return (
+    <>
+      {children}
+      {parallel}
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-prefetch-false/page.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function Layout() {
+  return (
+    <div>
+      <Link prefetch={false} href="/parallel-prefetch-false/foo">
+        link
+      </Link>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts

@@ -284,6 +284,27 @@ createNextDescribe(
           'slot catchall'
         )
       })
+
+      it('should navigate with a link with prefetch=false', async () => {
+        const browser = await next.browser('/parallel-prefetch-false')
+
+        // check if the default view loads
+        await check(
+          () => browser.waitForElementByCss('#default-parallel').text(),
+          'default view for parallel'
+        )
+
+        // check that navigating to /foo re-renders the layout to display @parallel/foo
+        await check(
+          () =>
+            browser
+              .elementByCss('[href="/parallel-prefetch-false/foo"]')
+              .click()
+              .waitForElementByCss('#parallel-foo')
+              .text(),
+          'parallel for foo'
+        )
+      })
     })
 
     describe('route intercepting', () => {