fix: don't reload parent routes when search params are constant (#1965)

`location.search` starts with `?` while `searchParams.toString()` does not have a `?` in it, so this check was not behaving any differently than just checking if `location.search` wasn't empty.

We might be tempted to sort these before comparing, but technically application code can behave differently depending on the order of the params, so we shouldn't do that.

contributors.yml

@@ -185,3 +185,4 @@
 - zainfathoni
 - jssisodiya
 - guerra08
+- jca41

packages/remix-react/__tests__/transition-test.tsx

@@ -118,6 +118,20 @@ describe("normal navigation", () => {
     expect(t.getState().loaderData.foo).toBe("2");
   });
 
+  it("does not reload all routes when search does not change", async () => {
+    let t = setup();
+    let A = t.navigate.get("/foo?q=1");
+    await A.loader.resolve("1");
+    expect(t.rootLoaderMock.calls.length).toBe(1);
+    expect(t.getState().loaderData.foo).toBe("1");
+
+    let B = t.navigate.get("/foo/bar?q=1");
+    await B.loader.resolve("2");
+    expect(t.rootLoaderMock.calls.length).toBe(1);
+
+    expect(t.getState().loaderData.foobar).toBe("2");
+  });
+
   it("reloads only routes with changed params", async () => {
     let t = setup();
 
@@ -314,6 +328,15 @@ describe("no route match", () => {
                 "module": "",
                 "path": "/foo",
               },
+              Object {
+                "action": [MockFunction],
+                "element": Object {},
+                "hasLoader": true,
+                "id": "foobar",
+                "loader": [MockFunction],
+                "module": "",
+                "path": "/foo/bar",
+              },
               Object {
                 "action": [MockFunction],
                 "element": Object {},
@@ -1892,6 +1915,15 @@ let setup = ({ url } = { url: "/" }) => {
           element: {},
           module: ""
         },
+        {
+          path: "/foo/bar",
+          id: "foobar",
+          hasLoader: true,
+          loader: createLoader(),
+          action: createAction(),
+          element: {},
+          module: ""
+        },
         {
           path: "/bar",
           id: "bar",

packages/remix-react/transition.ts

@@ -1395,7 +1395,7 @@ function filterMatchesToLoad(
     // clicked the same link, resubmitted a GET form
     createHref(url) === createHref(state.location) ||
     // search affects all loaders
-    url.searchParams.toString() !== state.location.search
+    url.searchParams.toString() !== state.location.search.substring(1)
   ) {
     return matches.filter(filterByRouteProps);
   }