From a88fa880f0c502635e9bd04a071a8a16af0a511e Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 21 Oct 2022 10:45:30 -0400 Subject: [PATCH 1/4] fix: properly support index routes with a path in useResolvedPath --- .../__tests__/data-browser-router-test.tsx | 23 +++++++++++++++++++ packages/react-router/lib/hooks.tsx | 4 +--- packages/router/utils.ts | 4 +--- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx index aeffc33c1..a8b68ecb8 100644 --- a/packages/react-router-dom/__tests__/data-browser-router-test.tsx +++ b/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( + + + + } + /> + + + + ); + + expect(container.querySelector("form")?.getAttribute("action")).toBe( + "/foo/bar?index&a=1#hash" + ); + }); }); describe("dynamic routes", () => { diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index 76350418a..9019ca180 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/packages/react-router/lib/hooks.tsx @@ -171,9 +171,7 @@ export interface NavigateFunction { function getPathContributingMatches(matches: RouteMatch[]) { return matches.filter( (match, index) => - index === 0 || - (!match.route.index && - match.pathnameBase !== matches[index - 1].pathnameBase) + index === 0 || match.pathnameBase !== matches[index - 1].pathnameBase ); } diff --git a/packages/router/utils.ts b/packages/router/utils.ts index 6994ba152..8d36b5753 100644 --- a/packages/router/utils.ts +++ b/packages/router/utils.ts @@ -861,9 +861,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.pathnameBase !== matches[index - 1].pathnameBase ); } From 6deebae897833d8631b60cdab79e8b126df0457c Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 21 Oct 2022 11:05:42 -0400 Subject: [PATCH 2/4] chore: remove duped function --- packages/react-router/lib/hooks.tsx | 29 +---------------------------- packages/router/index.ts | 7 +++++-- packages/router/utils.ts | 2 ++ 3 files changed, 8 insertions(+), 30 deletions(-) diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index 9019ca180..5909e76fd 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/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,34 +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: - * - * - * - * - * - * - * - * }> // <-- Does not contribute - * // <-- Does not contribute - * - * - */ -function getPathContributingMatches(matches: RouteMatch[]) { - return matches.filter( - (match, index) => - index === 0 || match.pathnameBase !== matches[index - 1].pathnameBase - ); -} - /** * Returns an imperative method for changing the location. Used by s, but * may also be used by other elements to change the location. diff --git a/packages/router/index.ts b/packages/router/index.ts index 4196adc3f..f9739ba56 100644 --- a/packages/router/index.ts +++ b/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, +}; diff --git a/packages/router/utils.ts b/packages/router/utils.ts index 8d36b5753..8fcfb16c4 100644 --- a/packages/router/utils.ts +++ b/packages/router/utils.ts @@ -836,6 +836,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. From c02ab411db25ccc69665346c7d58d5d55dd703d1 Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 21 Oct 2022 11:06:40 -0400 Subject: [PATCH 3/4] add changeset --- .changeset/cyan-poems-clean.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/cyan-poems-clean.md diff --git a/.changeset/cyan-poems-clean.md b/.changeset/cyan-poems-clean.md new file mode 100644 index 000000000..567cdf9f4 --- /dev/null +++ b/.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 From ce47c0af1c43bd4dceaf6d0373ac4f137654392e Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 21 Oct 2022 11:26:41 -0400 Subject: [PATCH 4/4] look at path directly instead --- packages/router/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/router/utils.ts b/packages/router/utils.ts index 8fcfb16c4..bca047071 100644 --- a/packages/router/utils.ts +++ b/packages/router/utils.ts @@ -863,7 +863,7 @@ export function getPathContributingMatches< >(matches: T[]) { return matches.filter( (match, index) => - index === 0 || match.pathnameBase !== matches[index - 1].pathnameBase + index === 0 || (match.route.path && match.route.path.length > 0) ); }