Wrap route with location arg in location context

In order for the `useLocation` hook to work with the use of the modal
pattern, routes with the locationArg prop are wrapped in a
LocationContext. This is done conditionally in order to ensure
performance in the default case doesn't change.

Author: John Pangalos

.changeset/hungry-vans-ring.md

@@ -0,0 +1,8 @@
+---
+"react-router": patch
+"react-router-dom": patch
+"react-router-dom-v5-compat": patch
+"react-router-native": patch
+---
+
+Fix for `useLocation` returning the wrong `Location` when passing a `locationArg` into a `Routes` component.

package.json

@@ -107,7 +107,7 @@
       "none": "12 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "13.5 kB"
+      "none": "14 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "10 kB"

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import type { RouteObject } from "react-router";
-import { MemoryRouter, useRoutes } from "react-router";
+import { MemoryRouter, useRoutes, useLocation } from "react-router";
 
 describe("useRoutes", () => {
   it("returns the matching element from a route config", () => {
@@ -54,9 +54,16 @@ describe("useRoutes", () => {
   });
 
   it("Uses the `location` prop instead of context location`", () => {
+    let TwoComponent = () => {
+      const location = useLocation();
+      return <h1>two path:{location.pathname}</h1>;
+    };
     let routes = [
       { path: "one", element: <h1>one</h1> },
-      { path: "two", element: <h1>two</h1> },
+      {
+        path: "two",
+        element: <TwoComponent />,
+      },
     ];
 
     let renderer: TestRenderer.ReactTestRenderer;
@@ -68,9 +75,11 @@ describe("useRoutes", () => {
       );
     });
 
+    // console.log(renderer.toTree());
     expect(renderer.toJSON()).toMatchInlineSnapshot(`
       <h1>
-        two
+        two path:
+        /two
       </h1>
     `);
   });

packages/react-router/lib/hooks.tsx

@@ -408,7 +408,7 @@ export function useRoutes(
     );
   }
 
-  return _renderMatches(
+  let renderedMatches = _renderMatches(
     matches &&
       matches.map((match) =>
         Object.assign({}, match, {
@@ -423,6 +423,30 @@ export function useRoutes(
     parentMatches,
     dataRouterStateContext || undefined
   );
+
+  // When a user passes in a `locationArg` prop, the associated routes need to
+  // be wrapped in a `LocationContext.Provider` in order for `useLocation` to
+  // use the `locationArg` location instead of the global location.
+  if (locationArg) {
+    return (
+      <LocationContext.Provider
+        value={{
+          location: {
+            state: undefined,
+            key: "default",
+            pathname: "/",
+            search: "",
+            hash: "",
+            ...location,
+          },
+          navigationType: NavigationType.Pop,
+        }}
+      >
+        {renderedMatches}
+      </LocationContext.Provider>
+    );
+  }
+  return renderedMatches;
 }
 
 function DefaultErrorElement() {