Pass custom location to Routes + useRoutes

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

@@ -1,6 +1,8 @@
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter as Router, Routes, Route } from "react-router";
+import { act } from "react-dom/test-utils";
 
 describe("A <Routes>", () => {
   it("renders the first route that matches the URL", () => {
@@ -80,4 +82,26 @@ describe("A <Routes>", () => {
 
     expect(renderer.toJSON()).toMatchSnapshot();
   });
+
+  it("Uses the `location` prop instead of context location`", () => {
+    let node = document.createElement("div");
+    document.body.appendChild(node);
+
+    act(() => {
+      ReactDOM.render(
+        <Router initialEntries={["/one"]}>
+          <Routes location={{ pathname: "/two" }}>
+            <Route path="/one" element={<h1>one</h1>} />
+            <Route path="/two" element={<h1>two</h1>} />
+          </Routes>
+        </Router>,
+        node
+      );
+    });
+
+    expect(node.innerHTML).toMatch(/two/);
+
+    // cleanup
+    document.body.removeChild(node);
+  });
 });

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

@@ -1,13 +1,12 @@
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { create as createTestRenderer } from "react-test-renderer";
 import { MemoryRouter as Router, useRoutes } from "react-router";
+import { act } from "react-dom/test-utils";
+import type { PartialRouteObject } from "react-router";
 
 describe("useRoutes", () => {
   it("returns the matching element from a route config", () => {
-    function RoutesRenderer({ routes }) {
-      return useRoutes(routes);
-    }
-
     function Home() {
       return <h1>Home</h1>;
     }
@@ -29,4 +28,40 @@ describe("useRoutes", () => {
 
     expect(renderer.toJSON()).toMatchSnapshot();
   });
+
+  it("Uses the `location` prop instead of context location`", () => {
+    let node = document.createElement("div");
+    document.body.appendChild(node);
+
+    let routes = [
+      { path: "one", element: <h1>one</h1> },
+      { path: "two", element: <h1>two</h1> }
+    ];
+
+    act(() => {
+      ReactDOM.render(
+        <Router initialEntries={["/one"]}>
+          <RoutesRenderer routes={routes} location={{ pathname: "/two" }} />
+        </Router>,
+        node
+      );
+    });
+
+    expect(node.innerHTML).toMatch(/two/);
+
+    // cleanup
+    document.body.removeChild(node);
+  });
 });
+
+function RoutesRenderer({
+  routes,
+  basename,
+  location
+}: {
+  routes: PartialRouteObject[];
+  basename?: string;
+  location?: Partial<Location>;
+}) {
+  return useRoutes(routes, basename, location);
+}

packages/react-router/index.tsx

@@ -250,6 +250,7 @@ export function Router({
 export interface RoutesProps {
   basename?: string;
   children?: React.ReactNode;
+  location?: Partial<Location>;
 }
 
 /**
@@ -260,10 +261,11 @@ export interface RoutesProps {
  */
 export function Routes({
   basename = "",
-  children
+  children,
+  location
 }: RoutesProps): React.ReactElement | null {
   let routes = createRoutesFromChildren(children);
-  return useRoutes_(routes, basename);
+  return useRoutes_(routes, basename, location);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -483,7 +485,8 @@ export function useResolvedPath(to: To): Path {
  */
 export function useRoutes(
   partialRoutes: PartialRouteObject[],
-  basename = ""
+  basename = "",
+  locationProp?: Partial<Location>
 ): React.ReactElement | null {
   invariant(
     useInRouterContext(),
@@ -497,12 +500,13 @@ export function useRoutes(
     [partialRoutes]
   );
 
-  return useRoutes_(routes, basename);
+  return useRoutes_(routes, basename, locationProp);
 }
 
 function useRoutes_(
   routes: RouteObject[],
-  basename = ""
+  basename = "",
+  locationProp?: Partial<Location>
 ): React.ReactElement | null {
   let {
     route: parentRoute,
@@ -530,7 +534,12 @@ function useRoutes_(
 
   basename = basename ? joinPaths([parentPathname, basename]) : parentPathname;
 
-  let location = useLocation() as Location;
+  let contextLocation = useLocation() as Location;
+  let location = React.useMemo(() => {
+    return locationProp
+      ? { ...contextLocation, ...locationProp }
+      : contextLocation;
+  }, [locationProp, contextLocation]);
   let matches = React.useMemo(
     () => matchRoutes(routes, location, basename),
     [location, routes, basename]