fix: Wrap route with location arg in location context

.changeset/hungry-vans-ring.md

@@ -5,4 +5,4 @@
 "react-router-native": patch
 ---
 
-Fix for `useLocation` returning the wrong `Location` when passing a `locationArg` into a `Routes` component.
+fix: update `useLocation` to return the scoped `Location` when inside a `<Routes location>` component

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

@@ -2,9 +2,9 @@ import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import { MemoryRouter, Routes, Route, useLocation } from "react-router";
 
-function ShowPath() {
-  let { pathname, search, hash } = useLocation();
-  return <pre>{JSON.stringify({ pathname, search, hash })}</pre>;
+function ShowLocation() {
+  let location = useLocation();
+  return <pre>{JSON.stringify(location)}</pre>;
 }
 
 describe("useLocation", () => {
@@ -14,16 +14,55 @@ describe("useLocation", () => {
       renderer = TestRenderer.create(
         <MemoryRouter initialEntries={["/home?the=search#the-hash"]}>
           <Routes>
-            <Route path="/home" element={<ShowPath />} />
+            <Route path="/home" element={<ShowLocation />} />
           </Routes>
         </MemoryRouter>
       );
     });
 
     expect(renderer.toJSON()).toMatchInlineSnapshot(`
       <pre>
-        {"pathname":"/home","search":"?the=search","hash":"#the-hash"}
+        {"pathname":"/home","search":"?the=search","hash":"#the-hash","state":null,"key":"default"}
       </pre>
     `);
   });
+
+  it("returns the scoped location object when nested in <Routes location>", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter initialEntries={["/home?the=search#the-hash"]}>
+          <App />
+        </MemoryRouter>
+      );
+    });
+
+    function App() {
+      return (
+        <div>
+          <h1>App</h1>
+          <Routes>
+            <Route path="/home" element={<ShowLocation />} />
+          </Routes>
+          <Routes location="/scoped?scoped=search#scoped-hash">
+            <Route path="/scoped" element={<ShowLocation />} />
+          </Routes>
+        </div>
+      );
+    }
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          App
+        </h1>
+        <pre>
+          {"pathname":"/home","search":"?the=search","hash":"#the-hash","state":null,"key":"default"}
+        </pre>
+        <pre>
+          {"pathname":"/scoped","search":"?scoped=search","hash":"#scoped-hash","state":null,"key":"default"}
+        </pre>
+      </div>
+    `);
+  });
 });

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, useLocation } from "react-router";
+import { MemoryRouter, useRoutes } from "react-router";
 
 describe("useRoutes", () => {
   it("returns the matching element from a route config", () => {
@@ -54,15 +54,11 @@ 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: <TwoComponent />,
+        element: <h1>two</h1>,
       },
     ];
 
@@ -75,11 +71,9 @@ describe("useRoutes", () => {
       );
     });
 
-    // console.log(renderer.toTree());
     expect(renderer.toJSON()).toMatchInlineSnapshot(`
       <h1>
-        two path:
-        /two
+        two
       </h1>
     `);
   });

packages/react-router/lib/hooks.tsx

@@ -449,11 +449,11 @@ export function useRoutes(
       <LocationContext.Provider
         value={{
           location: {
-            state: undefined,
-            key: "default",
             pathname: "/",
             search: "",
             hash: "",
+            state: null,
+            key: "default",
             ...location,
           },
           navigationType: NavigationType.Pop,