Fix other code paths for resolveTo from a splat route (#11045)

* Fix other code paths for resolveTo from a splat route

* Bump bundle

Author: brophdawg11

.changeset/resolve-to-splat.md

@@ -0,0 +1,9 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+Fix bug with `resolveTo` in splat routes
+
+- This is a follow up to [#10983](https://github.com/remix-run/react-router/pull/10983) to handle the few other code paths using `getPathContributingMatches`
+- This removes the `UNSAFE_getPathContributingMatches` export from `@remix-run/router` since we no longer need this in the `react-router`/`react-router-dom` layers

package.json

@@ -110,7 +110,7 @@
   },
   "filesize": {
     "packages/router/dist/router.umd.min.js": {
-      "none": "49.3 kB"
+      "none": "49.4 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "13.9 kB"

packages/react-router/lib/components.tsx

@@ -14,7 +14,7 @@ import {
   AbortedDeferredError,
   Action as NavigationType,
   createMemoryHistory,
-  UNSAFE_getPathContributingMatches as getPathContributingMatches,
+  UNSAFE_getResolveToMatches as getResolveToMatches,
   UNSAFE_invariant as invariant,
   parsePath,
   resolveTo,
@@ -281,7 +281,7 @@ export function Navigate({
   // StrictMode they navigate to the same place
   let path = resolveTo(
     to,
-    getPathContributingMatches(matches).map((match) => match.pathnameBase),
+    getResolveToMatches(matches),
     locationPathname,
     relative === "path"
   );

packages/react-router/lib/hooks.tsx

@@ -18,7 +18,7 @@ import {
   IDLE_BLOCKER,
   Action as NavigationType,
   UNSAFE_convertRouteMatchToUiMatch as convertRouteMatchToUiMatch,
-  UNSAFE_getPathContributingMatches as getPathContributingMatches,
+  UNSAFE_getResolveToMatches as getResolveToMatches,
   UNSAFE_invariant as invariant,
   isRouteErrorResponse,
   joinPaths,
@@ -197,9 +197,7 @@ function useNavigateUnstable(): NavigateFunction {
   let { matches } = React.useContext(RouteContext);
   let { pathname: locationPathname } = useLocation();
 
-  let routePathnamesJson = JSON.stringify(
-    getPathContributingMatches(matches).map((match) => match.pathnameBase)
-  );
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
 
   let activeRef = React.useRef(false);
   useIsomorphicLayoutEffect(() => {
@@ -311,14 +309,7 @@ export function useResolvedPath(
 ): Path {
   let { matches } = React.useContext(RouteContext);
   let { pathname: locationPathname } = useLocation();
-
-  // Use the full pathname for the leaf match so we include splat values
-  // for "." links
-  let routePathnamesJson = JSON.stringify(
-    getPathContributingMatches(matches).map((match, idx) =>
-      idx === matches.length - 1 ? match.pathname : match.pathnameBase
-    )
-  );
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
 
   return React.useMemo(
     () =>

packages/router/__tests__/path-resolution-test.ts

@@ -138,7 +138,7 @@ describe("path resolution", () => {
             path: "*",
           },
         ],
-        "/foo",
+        "/foo/bar",
         false
       );
     });
@@ -391,6 +391,21 @@ describe("path resolution", () => {
       ]);
     });
 
+    it("from an index route", () => {
+      assertRoutingToChild([
+        {
+          path: "bar",
+          children: [
+            {
+              id: "activeRoute",
+              index: true,
+            },
+            { path: "baz" },
+          ],
+        },
+      ]);
+    });
+
     it("from a dynamic param route", () => {
       assertRoutingToChild([
         {
@@ -400,6 +415,15 @@ describe("path resolution", () => {
         },
       ]);
     });
+
+    it("from a splat route", () => {
+      assertRoutingToChild([
+        {
+          id: "activeRoute",
+          path: "*",
+        },
+      ]);
+    });
     /* eslint-enable jest/expect-expect */
   });
 

packages/router/index.ts

@@ -87,7 +87,7 @@ export {
   ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
   convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
-  getPathContributingMatches as UNSAFE_getPathContributingMatches,
+  getResolveToMatches as UNSAFE_getResolveToMatches,
 } from "./utils";
 
 export {

packages/router/router.ts

@@ -40,6 +40,7 @@ import {
   convertRouteMatchToUiMatch,
   convertRoutesToDataRoutes,
   getPathContributingMatches,
+  getResolveToMatches,
   immutableRouteKeys,
   isRouteErrorResponse,
   joinPaths,
@@ -3340,7 +3341,7 @@ function normalizeTo(
   // Resolve the relative path
   let path = resolveTo(
     to ? to : ".",
-    getPathContributingMatches(contextualMatches).map((m) => m.pathnameBase),
+    getResolveToMatches(contextualMatches),
     stripBasename(location.pathname, basename) || location.pathname,
     relative === "path"
   );

packages/router/utils.ts

@@ -1145,6 +1145,17 @@ export function getPathContributingMatches<
   );
 }
 
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+export function getResolveToMatches<
+  T extends AgnosticRouteMatch = AgnosticRouteMatch
+>(matches: T[]) {
+  // Use the full pathname for the leaf match so we include splat values for "." links
+  return getPathContributingMatches(matches).map((match, idx) =>
+    idx === matches.length - 1 ? match.pathname : match.pathnameBase
+  );
+}
+
 /**
  * @private
  */