From ab68f0882186405007e453ee235d30956e58f3a8 Mon Sep 17 00:00:00 2001
From: Chance Strickland <chance.strickland@gmail.com>
Date: Tue, 7 Sep 2021 15:42:37 -0700
Subject: [PATCH] Fix relative navigation issues (#8004)

---
 .../react-router/__tests__/navigate-test.tsx  | 451 ++++++++++++------
 packages/react-router/index.tsx               |  31 +-
 2 files changed, 340 insertions(+), 142 deletions(-)

diff --git a/packages/react-router/__tests__/navigate-test.tsx b/packages/react-router/__tests__/navigate-test.tsx
index 1a21f77d1d..a41f1cd248 100644
--- a/packages/react-router/__tests__/navigate-test.tsx
+++ b/packages/react-router/__tests__/navigate-test.tsx
@@ -22,7 +22,7 @@ describe("navigate", () => {
     node = null!;
   });
 
-  describe("with an absolute href", () => {
+  describe("with an absolute `to` value", () => {
     it("navigates to the correct URL", () => {
       function Home() {
         let navigate = useNavigate();
@@ -70,205 +70,380 @@ describe("navigate", () => {
     });
   });
 
-  describe("with a relative href", () => {
-    it("navigates to the correct URL", () => {
-      function Home() {
+  describe("with a relative `to` value", () => {
+    describe("with a search value", () => {
+      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>"`);
+      });
+    });
+
+    describe("with a search value and no pathname", () => {
+      function Bakery() {
         let navigate = useNavigate();
 
+        let user = new URLSearchParams(useLocation().search).get("user");
         function handleClick() {
-          navigate("../about");
+          navigate({
+            search: user ? "" : new URLSearchParams({ user: "mj" }).toString()
+          });
         }
 
         return (
           <div>
-            <h1>Home</h1>
-            <button onClick={handleClick}>click me</button>
+            <h1>Bakery</h1>
+            {user && <p>Welcome {user}</p>}
+            <Outlet />
+            <button onClick={handleClick}>{user ? "logout" : "login"}</button>
           </div>
         );
       }
 
+      function Muffins() {
+        return <h2>Yay, muffins!</h2>;
+      }
+
       function About() {
-        return <h1>About</h1>;
+        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
-        );
-      });
+      it("navigates relative to the current location's pathname", () => {
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/bakery/muffins"]}>
+              <Routes>
+                <Route path="bakery" element={<Bakery />}>
+                  <Route path="muffins" element={<Muffins />} />
+                </Route>
+                <Route path="about" element={<About />} />
+              </Routes>
+            </Router>,
+            node
+          );
+        });
 
-      expect(node.innerHTML).toMatchInlineSnapshot(
-        `"<div><h1>Home</h1><button>click me</button></div>"`
-      );
+        let button = node.querySelector("button");
 
-      let button = node.querySelector("button");
-      expect(button).not.toBeNull();
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
 
-      act(() => {
-        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<div><h1>Bakery</h1><p>Welcome mj</p><h2>Yay, muffins!</h2><button>logout</button></div>"`
+        );
       });
-
-      expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About</h1>"`);
     });
-  });
 
-  describe("with a search param", () => {
-    it("navigates to the correct URL with params", () => {
-      function Home() {
+    describe("with a hash value and no pathname", () => {
+      function Bakery() {
         let navigate = useNavigate();
-
         function handleClick() {
           navigate({
-            pathname: "../about",
-            search: new URLSearchParams({ user: "mj" }).toString()
+            hash: "#about"
           });
         }
 
         return (
           <div>
-            <h1>Home</h1>
-            <button onClick={handleClick}>click me</button>
+            <h1>Bakery</h1>
+            <button onClick={handleClick}>About us</button>
+            <Outlet />
+            <h2 id="about">About us</h2>
+            <p>We bake delicious cakes!</p>
           </div>
         );
       }
 
-      function About() {
-        let user = new URLSearchParams(useLocation().search).get("user");
-        return <h1>About {user}</h1>;
+      function Muffins() {
+        return <h2>Yay, muffins!</h2>;
       }
 
-      act(() => {
-        ReactDOM.render(
-          <Router initialEntries={["/home"]}>
-            <Routes>
-              <Route path="home" element={<Home />} />
-              <Route path="about" element={<About />} />
-            </Routes>
-          </Router>,
-          node
+      it("navigates relative to the current location's pathname", () => {
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/bakery/muffins"]}>
+              <Routes>
+                <Route path="bakery" element={<Bakery />}>
+                  <Route path="muffins" element={<Muffins />} />
+                </Route>
+              </Routes>
+            </Router>,
+            node
+          );
+        });
+
+        let button = node.querySelector("button");
+
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<div><h1>Bakery</h1><button>About us</button><h2>Yay, muffins!</h2><h2 id=\\"about\\">About us</h2><p>We bake delicious cakes!</p></div>"`
         );
       });
+    });
 
-      let button = node.querySelector("button");
+    describe("with a pathname", () => {
+      it("navigates relative to the route's pathname", () => {
+        function Home() {
+          let navigate = useNavigate();
+
+          function handleClick() {
+            navigate("../about");
+          }
+
+          return (
+            <div>
+              <h1>Home</h1>
+              <button onClick={handleClick}>click me</button>
+            </div>
+          );
+        }
 
-      act(() => {
-        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-      });
+        function About() {
+          return <h1>About</h1>;
+        }
+
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/home"]}>
+              <Routes>
+                <Route path="home" element={<Home />} />
+                <Route path="about" element={<About />} />
+              </Routes>
+            </Router>,
+            node
+          );
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<div><h1>Home</h1><button>click me</button></div>"`
+        );
+
+        let button = node.querySelector("button");
+        expect(button).not.toBeNull();
 
-      expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About mj</h1>"`);
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About</h1>"`);
+      });
     });
-  });
 
-  describe("with a search param and no pathname", () => {
-    function Bakery() {
-      let navigate = useNavigate();
+    describe("with a pathname, called from a parent route", () => {
+      it("navigates relative to the route's pathname", () => {
+        function Layout() {
+          let navigate = useNavigate();
+          function handleClick() {
+            navigate("about");
+          }
+          return (
+            <>
+              <h1>Title</h1>
+              <button onClick={handleClick}>About</button>
+              <Outlet />
+            </>
+          );
+        }
+
+        function Home() {
+          return <h2>Home</h2>;
+        }
+
+        function About() {
+          return <h2>About</h2>;
+        }
 
-      let user = new URLSearchParams(useLocation().search).get("user");
-      function handleClick() {
-        navigate({
-          search: user ? "" : new URLSearchParams({ user: "mj" }).toString()
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/app/home"]}>
+              <Routes>
+                <Route path="app" element={<Layout />}>
+                  <Route path="home" element={<Home />} />
+                  <Route path="about" element={<About />} />
+                </Route>
+              </Routes>
+            </Router>,
+            node
+          );
         });
-      }
 
-      return (
-        <div>
-          <h1>Bakery</h1>
-          {user && <p>Welcome {user}</p>}
-          <Outlet />
-          <button onClick={handleClick}>{user ? "logout" : "login"}</button>
-        </div>
-      );
-    }
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><button>About</button><h2>Home</h2>"`
+        );
 
-    function Muffins() {
-      return <h2>Yay, muffins!</h2>;
-    }
+        let button = node.querySelector("button");
+        expect(button).not.toBeNull();
 
-    function About() {
-      let user = new URLSearchParams(useLocation().search).get("user");
-      return <h1>About {user}</h1>;
-    }
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
 
-    it("resolves using the current location", () => {
-      act(() => {
-        ReactDOM.render(
-          <Router initialEntries={["/bakery/muffins"]}>
-            <Routes>
-              <Route path="bakery" element={<Bakery />}>
-                <Route path="muffins" element={<Muffins />} />
-              </Route>
-              <Route path="about" element={<About />} />
-            </Routes>
-          </Router>,
-          node
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><button>About</button><h2>About</h2>"`
         );
       });
+    });
 
-      let button = node.querySelector("button");
+    describe("with a pathname, called from a nested route", () => {
+      it("navigates relative to the route's pathname", () => {
+        function Layout() {
+          return (
+            <>
+              <h1>Title</h1>
+              <Outlet />
+            </>
+          );
+        }
 
-      act(() => {
-        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-      });
+        function Home() {
+          let navigate = useNavigate();
+          function handleClick() {
+            navigate("../about");
+          }
+          return (
+            <>
+              <h2>Home</h2>
+              <button onClick={handleClick}>About</button>
+            </>
+          );
+        }
 
-      expect(node.innerHTML).toMatchInlineSnapshot(
-        `"<div><h1>Bakery</h1><p>Welcome mj</p><h2>Yay, muffins!</h2><button>logout</button></div>"`
-      );
-    });
-  });
+        function About() {
+          return <h2>About</h2>;
+        }
 
-  describe("with a hash param and no pathname", () => {
-    function Bakery() {
-      let navigate = useNavigate();
-      function handleClick() {
-        navigate({
-          hash: "#about"
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/app/home"]}>
+              <Routes>
+                <Route path="app" element={<Layout />}>
+                  <Route path="home" element={<Home />} />
+                  <Route path="about" element={<About />} />
+                </Route>
+              </Routes>
+            </Router>,
+            node
+          );
         });
-      }
 
-      return (
-        <div>
-          <h1>Bakery</h1>
-          <button onClick={handleClick}>About us</button>
-          <Outlet />
-          <h2 id="about">About us</h2>
-          <p>We bake delicious cakes!</p>
-        </div>
-      );
-    }
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><h2>Home</h2><button>About</button>"`
+        );
 
-    function Muffins() {
-      return <h2>Yay, muffins!</h2>;
-    }
+        let button = node.querySelector("button");
+        expect(button).not.toBeNull();
 
-    it("resolves using the current location", () => {
-      act(() => {
-        ReactDOM.render(
-          <Router initialEntries={["/bakery/muffins"]}>
-            <Routes>
-              <Route path="bakery" element={<Bakery />}>
-                <Route path="muffins" element={<Muffins />} />
-              </Route>
-            </Routes>
-          </Router>,
-          node
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><h2>About</h2>"`
         );
       });
+    });
 
-      let button = node.querySelector("button");
+    describe("when the pathname is '.'", () => {
+      it("navigates relative to the route's pathname", () => {
+        function Layout() {
+          return (
+            <>
+              <h1>Title</h1>
+              <Outlet />
+            </>
+          );
+        }
 
-      act(() => {
-        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-      });
+        function Home() {
+          let navigate = useNavigate();
+          function handleClick() {
+            navigate("./#about");
+          }
+          return (
+            <div>
+              <button onClick={handleClick}>About</button>
+              <h2 id="#about">About</h2>
+            </div>
+          );
+        }
 
-      expect(node.innerHTML).toMatchInlineSnapshot(
-        `"<div><h1>Bakery</h1><button>About us</button><h2>Yay, muffins!</h2><h2 id=\\"about\\">About us</h2><p>We bake delicious cakes!</p></div>"`
-      );
+        function About() {
+          return <h2>About</h2>;
+        }
+
+        act(() => {
+          ReactDOM.render(
+            <Router initialEntries={["/home"]}>
+              <Routes>
+                <Route element={<Layout />}>
+                  <Route path="home" element={<Home />} />
+                  <Route path="about" element={<About />} />
+                </Route>
+              </Routes>
+            </Router>,
+            node
+          );
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><div><button>About</button><h2 id=\\"#about\\">About</h2></div>"`
+        );
+
+        let button = node.querySelector("button");
+        expect(button).not.toBeNull();
+
+        act(() => {
+          button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
+
+        expect(node.innerHTML).toMatchInlineSnapshot(
+          `"<h1>Title</h1><div><button>About</button><h2 id=\\"#about\\">About</h2></div>"`
+        );
+      });
     });
   });
 });
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index acb11199a4..7cd09fdd91 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -418,8 +418,9 @@ export function useNavigate(): NavigateFunction {
   );
 
   let navigator = React.useContext(NavigatorContext);
-  let { basename } = React.useContext(RouteContext);
-  let { pathname } = useLocation();
+  let { basename, pathname: parentRoutePathname } =
+    React.useContext(RouteContext);
+  let { pathname: currentLocationPathname } = useLocation();
 
   let activeRef = React.useRef(false);
   React.useEffect(() => {
@@ -432,7 +433,29 @@ export function useNavigate(): NavigateFunction {
         if (typeof to === "number") {
           navigator.go(to);
         } else {
-          let path = resolvePath(to, pathname, basename);
+          let toPathname =
+            // Empty strings should be treated the same as / paths
+            to === "" || (to as Path).pathname === ""
+              ? "/"
+              : typeof to === "string"
+              ? parsePath(to).pathname
+              : to.pathname;
+
+          let path = resolvePath(
+            to,
+            // If a pathname is explicitly provided in `to`, it should be
+            // relative to the parent route context. This is explained in `Note
+            // on `<Link to>` values` in our migration guide from v5 as a means
+            // of disambiguation between `to` values that begin with `/` and
+            // those that do not. However, this is problematic for `to` values
+            // that do not provide a pathname. `to` can simply be a search or
+            // hash string, in which case we should assume that the navigation
+            // is relative to the current location's pathname and *not* the
+            // pathname from the parent route.
+            toPathname ? parentRoutePathname : currentLocationPathname,
+            basename
+          );
+
           (!!options.replace ? navigator.replace : navigator.push)(
             path,
             options.state
@@ -446,7 +469,7 @@ export function useNavigate(): NavigateFunction {
         );
       }
     },
-    [basename, navigator, pathname]
+    [basename, navigator, parentRoutePathname, currentLocationPathname]
   );
 
   return navigate;