fix: detect and error on invalid pathnames (#9375)

* fix: detect and error on invalid pathnames

* Enhance error message

* add changeset

* Extract function

* Update warning message

Co-authored-by: Michael Jackson <[email protected]>

* fix test error message

Co-authored-by: Michael Jackson <[email protected]>

Author: brophdawg11

.changeset/dirty-yaks-repair.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+fix: throw error when receiving invalid path object (#9375)

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

@@ -164,6 +164,82 @@ describe("useNavigate", () => {
     `);
   });
 
+  it("throws on invalid destination path objects", () => {
+    function Home() {
+      let navigate = useNavigate();
+
+      return (
+        <div>
+          <h1>Home</h1>
+          <button onClick={() => navigate({ pathname: "/about/thing?search" })}>
+            click 1
+          </button>
+          <button onClick={() => navigate({ pathname: "/about/thing#hash" })}>
+            click 2
+          </button>
+          <button
+            onClick={() => navigate({ pathname: "/about/thing?search#hash" })}
+          >
+            click 3
+          </button>
+          <button
+            onClick={() =>
+              navigate({
+                pathname: "/about/thing",
+                search: "?search#hash",
+              })
+            }
+          >
+            click 4
+          </button>
+        </div>
+      );
+    }
+
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home"]}>
+          <Routes>
+            <Route path="home" element={<Home />} />
+          </Routes>
+        </MemoryRouter>
+      );
+    });
+
+    expect(() =>
+      TestRenderer.act(() => {
+        renderer.root.findAllByType("button")[0].props.onClick();
+      })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Cannot include a '?' character in a manually specified \`to.pathname\` field [{\\"pathname\\":\\"/about/thing?search\\"}].  Please separate it out to the \`to.search\` field. Alternatively you may provide the full path as a string in <Link to=\\"...\\"> and the router will parse it for you."`
+    );
+
+    expect(() =>
+      TestRenderer.act(() => {
+        renderer.root.findAllByType("button")[1].props.onClick();
+      })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Cannot include a '#' character in a manually specified \`to.pathname\` field [{\\"pathname\\":\\"/about/thing#hash\\"}].  Please separate it out to the \`to.hash\` field. Alternatively you may provide the full path as a string in <Link to=\\"...\\"> and the router will parse it for you."`
+    );
+
+    expect(() =>
+      TestRenderer.act(() => {
+        renderer.root.findAllByType("button")[2].props.onClick();
+      })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Cannot include a '?' character in a manually specified \`to.pathname\` field [{\\"pathname\\":\\"/about/thing?search#hash\\"}].  Please separate it out to the \`to.search\` field. Alternatively you may provide the full path as a string in <Link to=\\"...\\"> and the router will parse it for you."`
+    );
+
+    expect(() =>
+      TestRenderer.act(() => {
+        renderer.root.findAllByType("button")[3].props.onClick();
+      })
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Cannot include a '#' character in a manually specified \`to.search\` field [{\\"pathname\\":\\"/about/thing\\",\\"search\\":\\"?search#hash\\"}].  Please separate it out to the \`to.hash\` field. Alternatively you may provide the full path as a string in <Link to=\\"...\\"> and the router will parse it for you."`
+    );
+  });
+
   describe("with state", () => {
     it("adds the state to location.state", () => {
       function Home() {

packages/router/utils.ts

@@ -819,6 +819,22 @@ function resolvePathname(relativePath: string, fromPathname: string): string {
   return segments.length > 1 ? segments.join("/") : "/";
 }
 
+function getInvalidPathError(
+  char: string,
+  field: string,
+  dest: string,
+  path: Partial<Path>
+) {
+  return (
+    `Cannot include a '${char}' character in a manually specified ` +
+    `\`to.${field}\` field [${JSON.stringify(
+      path
+    )}].  Please separate it out to the ` +
+    `\`to.${dest}\` field. Alternatively you may provide the full path as ` +
+    `a string in <Link to="..."> and the router will parse it for you.`
+  );
+}
+
 /**
  * @private
  */
@@ -828,7 +844,26 @@ export function resolveTo(
   locationPathname: string,
   isPathRelative = false
 ): Path {
-  let to = typeof toArg === "string" ? parsePath(toArg) : { ...toArg };
+  let to: Partial<Path>;
+  if (typeof toArg === "string") {
+    to = parsePath(toArg);
+  } else {
+    to = { ...toArg };
+
+    invariant(
+      !to.pathname || !to.pathname.includes("?"),
+      getInvalidPathError("?", "pathname", "search", to)
+    );
+    invariant(
+      !to.pathname || !to.pathname.includes("#"),
+      getInvalidPathError("#", "pathname", "hash", to)
+    );
+    invariant(
+      !to.search || !to.search.includes("#"),
+      getInvalidPathError("#", "search", "hash", to)
+    );
+  }
+
   let isEmptyPath = toArg === "" || to.pathname === "";
   let toPathname = isEmptyPath ? "/" : to.pathname;