Omit search part of path when detecting if the route changed after downloading asset bundles (#6707)

Co-authored-by: Matt Brophy <matt@brophy.org>

Author: n8agrin

.changeset/fix-reload-loops.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/react": patch
+"@remix-run/server-runtime": patch
+---
+
+Fix reload loops in scenarios where CDNs ignore search params

packages/remix-react/browser.tsx

@@ -181,17 +181,19 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
       },
     });
 
-    // Hard reload if the URL we tried to load is not the current URL.
-    // This is usually the result of 2 rapid backwards/forward clicks from an
+    // Hard reload if the path we tried to load is not the current path.
+    // This is usually the result of 2 rapid back/forward clicks from an
     // external site into a Remix app, where we initially start the load for
     // one URL and while the JS chunks are loading a second forward click moves
-    // us to a new URL
-    let initialUrl = window.__remixContext.url;
-    let hydratedUrl = window.location.pathname + window.location.search;
-    if (initialUrl !== hydratedUrl) {
+    // us to a new URL.  Avoid comparing search params because of CDNs which
+    // can be configured to ignore certain params and only pathname is relevant
+    // towards determining the route matches.
+    let initialPathname = window.__remixContext.url;
+    let hydratedPathname = window.location.pathname;
+    if (initialPathname !== hydratedPathname) {
       let errorMsg =
-        `Initial URL (${initialUrl}) does not match URL at time of hydration ` +
-        `(${hydratedUrl}), reloading page...`;
+        `Initial URL (${initialPathname}) does not match URL at time of hydration ` +
+        `(${hydratedPathname}), reloading page...`;
       console.error(errorMsg);
       window.location.reload();
     }

packages/remix-server-runtime/server.ts

@@ -289,7 +289,7 @@ async function handleDocumentRequestRR(
     routeModules: createEntryRouteModules(build.routes),
     staticHandlerContext: context,
     serverHandoffString: createServerHandoffString({
-      url: context.location.pathname + context.location.search,
+      url: context.location.pathname,
       state: {
         loaderData: context.loaderData,
         actionData: context.actionData,
@@ -335,7 +335,7 @@ async function handleDocumentRequestRR(
       ...entryContext,
       staticHandlerContext: context,
       serverHandoffString: createServerHandoffString({
-        url: context.location.pathname + context.location.search,
+        url: context.location.pathname,
         state: {
           loaderData: context.loaderData,
           actionData: context.actionData,