useRoutes: add support for location override (#7989)

* useRoutes: add support for location override
- Resolves #7117

Author: chaance

packages/react-router/__tests__/useRoutes-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, useRoutes } from "react-router";
+import { act } from "react-dom/test-utils";
 import type { PartialRouteObject } from "react-router";
 
 describe("useRoutes", () => {
@@ -26,14 +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
+  basename,
+  location
 }: {
   routes: PartialRouteObject[];
   basename?: string;
+  location?: Partial<Location> & { pathname: string };
 }) {
-  return useRoutes(routes, basename);
+  return useRoutes(routes, basename, location);
 }

packages/react-router/index.tsx

@@ -6,7 +6,6 @@ import type {
   InitialEntry,
   Location,
   MemoryHistory,
-  PartialLocation,
   Path,
   State,
   To,
@@ -250,10 +249,15 @@ export function Router({
   );
 }
 
+interface PartialLocation<S extends State = State>
+  extends Omit<Partial<Location<S>>, "pathname"> {
+  pathname: string;
+}
+
 export interface RoutesProps {
   basename?: string;
   children?: React.ReactNode;
-  location?: Location;
+  location?: PartialLocation;
 }
 
 /**
@@ -268,8 +272,7 @@ export function Routes({
   location
 }: RoutesProps): React.ReactElement | null {
   let routes = createRoutesFromChildren(children);
-  let location_ = useLocation();
-  return useRoutes_(routes, location ?? location_, basename);
+  return useRoutes_(routes, location, basename);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -492,7 +495,8 @@ export function useResolvedPath(to: To): Path {
  */
 export function useRoutes(
   partialRoutes: PartialRouteObject[],
-  basename = ""
+  basename = "",
+  location?: PartialLocation
 ): React.ReactElement | null {
   invariant(
     useInRouterContext(),
@@ -501,7 +505,6 @@ export function useRoutes(
     `useRoutes() may be used only in the context of a <Router> component.`
   );
 
-  let location = useLocation();
   let routes = React.useMemo(
     () => createRoutesFromArray(partialRoutes),
     [partialRoutes]
@@ -512,7 +515,7 @@ export function useRoutes(
 
 function useRoutes_(
   routes: RouteObject[],
-  location: Location,
+  locationOverride?: PartialLocation,
   basename = ""
 ): React.ReactElement | null {
   let {
@@ -543,6 +546,9 @@ function useRoutes_(
     ? joinPaths([parentPathname, basename])
     : parentPathname;
 
+  let contextLocation = useLocation();
+  let location = locationOverride ?? contextLocation;
+
   let matches = React.useMemo(
     () => matchRoutes(routes, location, basenameForMatching),
     [location, routes, basenameForMatching]
@@ -703,7 +709,7 @@ export function generatePath(path: string, params: Params = {}): string {
  */
 export function matchRoutes(
   routes: PartialRouteObject[],
-  location: string | PartialLocation,
+  location: string | Partial<Location>,
   basename = ""
 ): RouteMatch[] | null {
   if (typeof location === "string") {