Merge branch 'dev' of github.com:remix-run/react-router into dev

Author: chaance

packages/react-router/__tests__/Routes-location-test.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { create as createTestRenderer } from "react-test-renderer";
+import {
+  MemoryRouter as Router,
+  Route,
+  Routes,
+  useParams
+} from "react-router";
+
+describe("<Routes> with a location", () => {
+
+  function Home() {
+    return <h1>Home</h1>;
+  }
+
+  function User() {
+    let { userId } = useParams();
+    return (
+      <div>
+        <h1>User: {userId}</h1>
+      </div>
+    );
+  }
+
+  it("matches when the location is overridden", () => {
+
+    const location = {
+      pathname: '/home',
+      search: '',
+      hash: '',
+      state: null,
+      key: 'r9qntrej'
+    };
+    const renderer = createTestRenderer(
+      <Router initialEntries={["/users/michael"]}>
+        <Routes location={location}>
+          <Route path="home" element={<Home />} />
+          <Route path="users/:userId" element={<User />} />
+        </Routes>
+      </Router>
+    );
+
+    expect(renderer.toJSON()).not.toBeNull();
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+     <h1>
+       Home
+     </h1>
+    `);
+  });
+
+
+  it("matches when the location is not overridden", () => {
+    const renderer = createTestRenderer(
+      <Router initialEntries={["/users/michael"]}>
+        <Routes>
+          <Route path="home" element={<Home />} />
+          <Route path="users/:userId" element={<User />} />
+        </Routes>
+      </Router>
+    );
+
+    expect(renderer.toJSON()).not.toBeNull();
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          User: 
+          michael
+        </h1>
+      </div>
+    `);
+  });
+});

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

@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 import {
   MemoryRouter as Router,
+  Outlet,
   Routes,
   Route,
   useNavigate,
@@ -163,4 +164,111 @@ describe("navigate", () => {
       expect(node.innerHTML).toMatchInlineSnapshot(`"<h1>About mj</h1>"`);
     });
   });
+
+  describe("with a search param and no pathname", () => {
+    function Bakery() {
+      let navigate = useNavigate();
+
+      let user = new URLSearchParams(useLocation().search).get("user");
+      function handleClick() {
+        navigate({
+          search: user ? "" : new URLSearchParams({ user: "mj" }).toString()
+        });
+      }
+
+      return (
+        <div>
+          <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() {
+      let user = new URLSearchParams(useLocation().search).get("user");
+      return <h1>About {user}</h1>;
+    }
+
+    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
+        );
+      });
+
+      let button = node.querySelector("button");
+
+      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>"`
+      );
+    });
+  });
+
+  describe("with a hash param and no pathname", () => {
+    function Bakery() {
+      let navigate = useNavigate();
+      function handleClick() {
+        navigate({
+          hash: "#about"
+        });
+      }
+
+      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>
+      );
+    }
+
+    function Muffins() {
+      return <h2>Yay, muffins!</h2>;
+    }
+
+    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
+        );
+      });
+
+      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>"`
+      );
+    });
+  });
 });

packages/react-router/index.tsx

@@ -253,6 +253,7 @@ export function Router({
 export interface RoutesProps {
   basename?: string;
   children?: React.ReactNode;
+  location?: Location;
 }
 
 /**
@@ -263,11 +264,12 @@ export interface RoutesProps {
  */
 export function Routes({
   basename = "",
-  children
+  children,
+  location
 }: RoutesProps): React.ReactElement | null {
   let routes = createRoutesFromChildren(children);
-  let location = useLocation();
-  return useRoutes_(routes, location, basename);
+  let location_ = useLocation();
+  return useRoutes_(routes, location ?? location_, basename);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -413,7 +415,8 @@ export function useNavigate(): NavigateFunction {
   );
 
   let navigator = React.useContext(NavigatorContext);
-  let { pathname, basename } = React.useContext(RouteContext);
+  let { basename } = React.useContext(RouteContext);
+  let { pathname } = useLocation();
 
   let activeRef = React.useRef(false);
   React.useEffect(() => {