Normalize search + hash strings in resolvePath (#7953)

* Normalize search and hash strings in resolvePath
* remove unused vars in tests
* simplify test

Author: chaance

packages/react-router/__tests__/navigate-test.tsx

@@ -5,7 +5,8 @@ import {
   MemoryRouter as Router,
   Routes,
   Route,
-  useNavigate
+  useNavigate,
+  useLocation
 } from "react-router";
 
 describe("navigate", () => {
@@ -115,4 +116,51 @@ describe("navigate", () => {
       expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About</h1>"`);
     });
   });
+
+  describe("with a search param", () => {
+    it("navigates to the correct URL with params", () => {
+      function Home() {
+        let navigate = useNavigate();
+
+        function handleClick() {
+          navigate({
+            pathname: "../about",
+            search: new URLSearchParams({ user: "mj" }).toString()
+          });
+        }
+
+        return (
+          <div>
+            <h1>Home</h1>
+            <button onClick={handleClick}>click me</button>
+          </div>
+        );
+      }
+
+      function About() {
+        let user = new URLSearchParams(useLocation().search).get("user");
+        return <h1>About {user}</h1>;
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <Router initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home" element={<Home />} />
+              <Route path="about" element={<About />} />
+            </Routes>
+          </Router>,
+          node
+        );
+      });
+
+      let button = node.querySelector("button");
+
+      act(() => {
+        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      });
+
+      expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About mj</h1>"`);
+    });
+  });
 });

packages/react-router/__tests__/useResolvedPath-test.tsx

@@ -32,6 +32,33 @@ describe("useResolvedPath", () => {
     });
   });
 
+  it("partial path object resolves to Path object", () => {
+    let path!: Path;
+    function Home() {
+      path = useResolvedPath({
+        pathname: "/home",
+        search: new URLSearchParams({ user: "mj" }).toString(),
+        hash: "#welcome"
+      });
+      return <h1>Home</h1>;
+    }
+
+    createTestRenderer(
+      <Router initialEntries={["/home"]}>
+        <Routes>
+          <Route path="/home" element={<Home />} />
+        </Routes>
+      </Router>
+    );
+
+    expect(typeof path).toBe("object");
+    expect(path).toMatchObject({
+      pathname: "/home",
+      search: "?user=mj",
+      hash: "#welcome"
+    });
+  });
+
   describe("given a hash with a ? character", () => {
     it("hash is not parsed as a search string", () => {
       let path!: Path;

packages/react-router/index.tsx

@@ -989,13 +989,25 @@ export function resolvePath(to: To, fromPathname = "/", basename = ""): Path {
       )
     : fromPathname;
 
-  return { pathname, search, hash };
+  return {
+    pathname,
+    search: normalizeSearch(search),
+    hash: normalizeHash(hash)
+  };
 }
 
 const trimTrailingSlashes = (path: string) => path.replace(/\/+$/, "");
 const normalizeSlashes = (path: string) => path.replace(/\/\/+/g, "/");
 const joinPaths = (paths: string[]) => normalizeSlashes(paths.join("/"));
 const splitPath = (path: string) => normalizeSlashes(path).split("/");
+const normalizeSearch = (search: string) =>
+  !search || search === "?"
+    ? ""
+    : search.startsWith("?")
+    ? search
+    : "?" + search;
+const normalizeHash = (hash: string) =>
+  !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
 
 function resolvePathname(toPathname: string, fromPathname: string): string {
   let segments = splitPath(trimTrailingSlashes(fromPathname));