Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix useFormAction inheriting ?index param from child route action submission #11025

Merged
merged 1 commit into from
Nov 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/form-action-index.md
@@ -0,0 +1,5 @@
---
"react-router-dom": patch
---

Fix `useFormAction` which was incorrectly inheriting the `?index` query param from child route `action` submissions
22 changes: 22 additions & 0 deletions packages/react-router-dom/__tests__/data-browser-router-test.tsx
Expand Up @@ -2693,6 +2693,28 @@ function testDomRouter(
"/foo"
);
});

it("does not include the index parameter if we've submitted to a child index route", async () => {
let router = createTestRouter(
createRoutesFromElements(
<Route path="/">
<Route path="foo">
<Route path="bar" element={<NoActionComponent />}>
<Route index={true} element={<h1>Index</h1>} />
</Route>
</Route>
</Route>
),
{
window: getWindow("/foo/bar?index&a=1"),
}
);
let { container } = render(<RouterProvider router={router} />);

expect(container.querySelector("form")?.getAttribute("action")).toBe(
"/foo/bar?a=1"
);
});
});

describe("index routes", () => {
Expand Down
10 changes: 5 additions & 5 deletions packages/react-router-dom/index.tsx
Expand Up @@ -1551,11 +1551,11 @@ export function useFormAction(
// would have called useResolvedPath(".") which will never include a search
path.search = location.search;

// When grabbing search params from the URL, remove the automatically
// inserted ?index param so we match the useResolvedPath search behavior
// which would not include ?index
if (match.route.index) {
let params = new URLSearchParams(path.search);
// When grabbing search params from the URL, remove any included ?index param
// since it might not apply to our contextual route. We add it back based
// on match.route.index below
let params = new URLSearchParams(path.search);
if (params.has("index") && params.get("index") === "") {
params.delete("index");
path.search = params.toString() ? `?${params.toString()}` : "";
}
Expand Down