fix: properly support index routes with a path in useResolvedPath (#9486

)

* fix: properly support index routes with a path in useResolvedPath

* chore: remove duped function

* add changeset

* look at path directly instead

.changeset/cyan-poems-clean.md

@@ -0,0 +1,6 @@
+---
+"react-router-dom": patch
+"@remix-run/router": patch
+---
+
+properly support index routes with a path in useResolvedPath

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -1737,6 +1737,29 @@ function testDomRouter(
           await new Promise((r) => setTimeout(r, 0));
           assertLocation(testWindow, "/form", "?index");
         });
+
+        it("handles index routes with a path", async () => {
+          let { container } = render(
+            <TestDataRouter
+              window={getWindow("/foo/bar?a=1#hash")}
+              hydrationData={{}}
+            >
+              <Route path="/">
+                <Route path="foo">
+                  <Route
+                    index={true}
+                    path="bar"
+                    element={<NoActionComponent />}
+                  />
+                </Route>
+              </Route>
+            </TestDataRouter>
+          );
+
+          expect(container.querySelector("form")?.getAttribute("action")).toBe(
+            "/foo/bar?index&a=1#hash"
+          );
+        });
       });
 
       describe("dynamic routes", () => {

packages/react-router/lib/hooks.tsx

@@ -19,6 +19,7 @@ import {
   parsePath,
   resolveTo,
   warning,
+  UNSAFE_getPathContributingMatches as getPathContributingMatches,
 } from "@remix-run/router";
 
 import type {
@@ -147,36 +148,6 @@ export interface NavigateFunction {
   (delta: number): void;
 }
 
-/**
- * When processing relative navigation we want to ignore ancestor routes that
- * do not contribute to the path, such that index/pathless layout routes don't
- * interfere.
- *
- * For example, when moving a route element into an index route and/or a
- * pathless layout route, relative link behavior contained within should stay
- * the same.  Both of the following examples should link back to the root:
- *
- *   <Route path="/">
- *     <Route path="accounts" element={<Link to=".."}>
- *   </Route>
- *
- *   <Route path="/">
- *     <Route path="accounts">
- *       <Route element={<AccountsLayout />}>       // <-- Does not contribute
- *         <Route index element={<Link to=".."} />  // <-- Does not contribute
- *       </Route
- *     </Route>
- *   </Route>
- */
-function getPathContributingMatches(matches: RouteMatch[]) {
-  return matches.filter(
-    (match, index) =>
-      index === 0 ||
-      (!match.route.index &&
-        match.pathnameBase !== matches[index - 1].pathnameBase)
-  );
-}
-
 /**
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.

packages/router/index.ts

@@ -1,4 +1,4 @@
-import { convertRoutesToDataRoutes } from "./utils";
+import { convertRoutesToDataRoutes, getPathContributingMatches } from "./utils";
 
 export type {
   ActionFunction,
@@ -79,4 +79,7 @@ export * from "./router";
 ///////////////////////////////////////////////////////////////////////////////
 
 /** @internal */
-export { convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes };
+export {
+  convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
+  getPathContributingMatches as UNSAFE_getPathContributingMatches,
+};

packages/router/utils.ts

@@ -857,6 +857,8 @@ function getInvalidPathError(
 }
 
 /**
+ * @private
+ *
  * When processing relative navigation we want to ignore ancestor routes that
  * do not contribute to the path, such that index/pathless layout routes don't
  * interfere.
@@ -882,9 +884,7 @@ export function getPathContributingMatches<
 >(matches: T[]) {
   return matches.filter(
     (match, index) =>
-      index === 0 ||
-      (!match.route.index &&
-        match.pathnameBase !== matches[index - 1].pathnameBase)
+      index === 0 || (match.route.path && match.route.path.length > 0)
   );
 }