fix refreshing inactive segments that contained searchParams

packages/next/src/client/components/router-reducer/apply-router-state-patch-to-tree.ts

@@ -93,6 +93,8 @@ export function applyRouterStatePatchToTree(
       flightSegmentPath
     )
 
+    addRefreshMarkerToActiveParallelSegments(tree, pathname)
+
     return tree
   }
 

packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts

@@ -74,7 +74,7 @@ function fastRefreshReducerImpl(
           [''],
           currentTree,
           treePatch,
-          location.pathname
+          state.canonicalUrl
         )
 
         if (newTree === null) {

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -176,7 +176,7 @@ function navigateReducer_noPPR(
           flightSegmentPathWithLeadingEmpty,
           currentTree,
           treePatch,
-          url.pathname
+          href
         )
 
         // If the tree patch can't be applied to the current tree then we use the tree at time of prefetch
@@ -187,7 +187,7 @@ function navigateReducer_noPPR(
             flightSegmentPathWithLeadingEmpty,
             treeAtTimeOfPrefetch,
             treePatch,
-            url.pathname
+            href
           )
         }
 
@@ -354,7 +354,7 @@ function navigateReducer_PPR(
           flightSegmentPathWithLeadingEmpty,
           currentTree,
           treePatch,
-          url.pathname
+          href
         )
 
         // If the tree patch can't be applied to the current tree then we use the tree at time of prefetch
@@ -365,7 +365,7 @@ function navigateReducer_PPR(
             flightSegmentPathWithLeadingEmpty,
             treeAtTimeOfPrefetch,
             treePatch,
-            url.pathname
+            href
           )
         }
 

packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts

@@ -74,7 +74,7 @@ export function refreshReducer(
           [''],
           currentTree,
           treePatch,
-          location.pathname
+          state.canonicalUrl
         )
 
         if (newTree === null) {

packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

@@ -225,7 +225,7 @@ export function serverActionReducer(
           [''],
           currentTree,
           treePatch,
-          location.pathname
+          href
         )
 
         if (newTree === null) {

packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts

@@ -48,7 +48,7 @@ export function serverPatchReducer(
       ['', ...flightSegmentPath],
       currentTree,
       treePatch,
-      location.pathname
+      state.canonicalUrl
     )
 
     if (newTree === null) {

packages/next/src/client/components/router-reducer/refetch-inactive-parallel-segments.ts

@@ -61,9 +61,7 @@ async function refreshInactiveParallelSegmentsImpl({
     // Eagerly kick off the fetch for the refetch path & the parallel routes. This should be fine to do as they each operate
     // independently on their own cache nodes, and `applyFlightData` will copy anything it doesn't care about from the existing cache.
     const fetchPromise = fetchServerResponse(
-      // we capture the pathname of the refetch without search params, so that it can be refetched with
-      // the "latest" search params when it comes time to actually trigger the fetch (below)
-      new URL(refetchPathname + location.search, location.origin),
+      new URL(refetchPathname, location.origin),
       // refetch from the root of the updated tree, otherwise it will be scoped to the current segment
       // and might not contain the data we need to patch in interception route data (such as dynamic params from a previous segment)
       [rootTree[0], rootTree[1], rootTree[2], 'refetch'],

test/e2e/app-dir/parallel-routes-revalidation/app/components/UpdateSearchParamsButton.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { useRouter } from 'next/navigation'
+
+export function UpdateSearchParamsButton({
+  searchParams,
+  id,
+}: {
+  searchParams: any
+  id?: string
+}) {
+  const router = useRouter()
+
+  return (
+    <div>
+      <div id={`search-params${id ? `-${id}` : ''}`}>
+        Params: {JSON.stringify(searchParams.random)}
+      </div>
+      <button
+        id={`update-search-params${id ? `-${id}` : ''}`}
+        style={{ color: 'blue', padding: '10px' }}
+        onClick={() => router.replace(`?random=${Math.random()}`)}
+      >
+        Add Search Params
+      </button>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-revalidation/app/dynamic-refresh/[dynamic]/@modal/(.)login/page.tsx

@@ -1,9 +1,10 @@
 import { RefreshButton } from '../../../../components/RefreshButton'
 import { RevalidateButton } from '../../../../components/RevalidateButton'
+import { UpdateSearchParamsButton } from '../../../../components/UpdateSearchParamsButton'
 
 const getRandom = async () => Math.random()
 
-export default async function Page({ params }) {
+export default async function Page({ params, searchParams }) {
   const someProp = await getRandom()
 
   return (
@@ -16,6 +17,7 @@ export default async function Page({ params }) {
         </div>
         <RefreshButton />
         <RevalidateButton />
+        <UpdateSearchParamsButton searchParams={searchParams} id="modal" />
       </div>
     </dialog>
   )

test/e2e/app-dir/parallel-routes-revalidation/app/dynamic-refresh/[dynamic]/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
+import { UpdateSearchParamsButton } from '../../components/UpdateSearchParamsButton'
 
-export default function Home() {
+export default function Home({ searchParams }) {
   return (
     <main>
       <Link href="/dynamic-refresh/foo/login">
@@ -9,6 +10,7 @@ export default function Home() {
       <div>
         Random # from Root Page: <span id="random-number">{Math.random()}</span>
       </div>
+      <UpdateSearchParamsButton searchParams={searchParams} />
     </main>
   )
 }

test/e2e/app-dir/parallel-routes-revalidation/app/refreshing/@modal/(.)login/page.tsx

@@ -1,9 +1,10 @@
 import { RefreshButton } from '../../../components/RefreshButton'
 import { RevalidateButton } from '../../../components/RevalidateButton'
+import { UpdateSearchParamsButton } from '../../../components/UpdateSearchParamsButton'
 
 const getRandom = async () => Math.random()
 
-export default async function Page() {
+export default async function Page({ searchParams }) {
   const someProp = await getRandom()
 
   return (
@@ -15,6 +16,7 @@ export default async function Page() {
         </div>
         <RefreshButton />
         <RevalidateButton />
+        <UpdateSearchParamsButton searchParams={searchParams} id="modal" />
       </div>
     </dialog>
   )

test/e2e/app-dir/parallel-routes-revalidation/app/refreshing/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
+import { UpdateSearchParamsButton } from '../components/UpdateSearchParamsButton'
 
-export default function Home() {
+export default function Home({ searchParams }) {
   return (
     <main>
       <Link href="/refreshing/login">
@@ -9,6 +10,7 @@ export default function Home() {
       <div>
         Random # from Root Page: <span id="random-number">{Math.random()}</span>
       </div>
+      <UpdateSearchParamsButton searchParams={searchParams} />
     </main>
   )
 }