Allow descendant <Routes> to receive all params

Fixes #8073

packages/react-router/__tests__/descendant-routes-params-test.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { create as createTestRenderer } from "react-test-renderer";
+import { MemoryRouter as Router, Routes, Route, useParams } from "react-router";
+
+describe("Descendant <Routes>", () => {
+  it("receive all params from ancestor <Routes>", () => {
+    function Message() {
+      return <p>The params are {JSON.stringify(useParams())}</p>;
+    }
+
+    function User() {
+      return (
+        <Routes>
+          <Route path="messages/:messageId" element={<Message />} />
+        </Routes>
+      );
+    }
+
+    let renderer = createTestRenderer(
+      <Router initialEntries={["/users/mj/messages/123"]}>
+        <Routes>
+          <Route path="users/:userId/*" element={<User />} />
+        </Routes>
+      </Router>
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        The params are 
+        {"userId":"mj","*":"messages/123","messageId":"123"}
+      </p>
+    `);
+  });
+});

packages/react-router/index.tsx

@@ -653,6 +653,7 @@ export function useRoutes(
     matches &&
       matches.map(match =>
         Object.assign({}, match, {
+          params: Object.assign({}, parentParams, match.params),
           pathname: joinPaths([parentPathnameStart, match.pathname])
         })
       )
@@ -692,10 +693,10 @@ export function createRoutesFromChildren(
     }
 
     let route: RouteObject = {
-      path: element.props.path,
       caseSensitive: element.props.caseSensitive,
+      element: element.props.element,
       index: element.props.index,
-      element: element.props.element
+      path: element.props.path
     };
 
     if (element.props.children) {