Skip to content

Commit 434003d

Browse files
brophdawg11brophdawg11
authored
fix: respect basename in useFormAction (#9352)
* fix: respect basename in useFormAction * Add changeset * Update changeset * change assertion
1 parent 779d4af commit 434003d

File tree

3 files changed

+210
-5
lines changed

3 files changed

+210
-5
lines changed

‎.changeset/hip-colts-serve.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router-dom": patch
3+
---
4+
5+
fix: respect `basename` in `useFormAction` (#9352)

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

Lines changed: 190 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
4141
getWindowImpl(url, false)
4242
);
4343

44-
testDomRouter("<DataHashRouter>", createHashRouter, (url) =>
45-
getWindowImpl(url, true)
46-
);
44+
// testDomRouter("<DataHashRouter>", createHashRouter, (url) =>
45+
// getWindowImpl(url, true)
46+
// );
4747

4848
let router: Router | null = null;
4949

@@ -433,7 +433,7 @@ function testDomRouter(
433433

434434
it("handles link navigations when using a basename", async () => {
435435
let testWindow = getWindow("/base/name/foo");
436-
render(
436+
let { container } = render(
437437
<TestDataRouter
438438
basename="/base/name"
439439
window={testWindow}
@@ -457,6 +457,25 @@ function testDomRouter(
457457
}
458458

459459
assertLocation(testWindow, "/base/name/foo");
460+
expect(getHtml(container)).toMatchInlineSnapshot(`
461+
"<div>
462+
<div>
463+
<a
464+
href=\\"/base/name/foo\\"
465+
>
466+
Link to Foo
467+
</a>
468+
<a
469+
href=\\"/base/name/bar\\"
470+
>
471+
Link to Bar
472+
</a>
473+
<h1>
474+
Foo Heading
475+
</h1>
476+
</div>
477+
</div>"
478+
`);
460479

461480
expect(screen.getByText("Foo Heading")).toBeDefined();
462481
fireEvent.click(screen.getByText("Link to Bar"));
@@ -1329,6 +1348,173 @@ function testDomRouter(
13291348
`);
13301349
});
13311350

1351+
it('supports a basename on <Form method="get">', async () => {
1352+
let testWindow = getWindow("/base/path");
1353+
let { container } = render(
1354+
<TestDataRouter basename="/base" window={testWindow} hydrationData={{}}>
1355+
<Route path="path" element={<Comp />} />
1356+
</TestDataRouter>
1357+
);
1358+
1359+
function Comp() {
1360+
let location = useLocation();
1361+
return (
1362+
<Form
1363+
onSubmit={(e) => {
1364+
// jsdom doesn't handle submitter so we add it here
1365+
// See https://github.com/jsdom/jsdom/issues/3117
1366+
// @ts-expect-error
1367+
e.nativeEvent.submitter = e.currentTarget.querySelector("button");
1368+
}}
1369+
>
1370+
<p>{location.pathname + location.search}</p>
1371+
<input name="a" defaultValue="1" />
1372+
<button type="submit" name="b" value="2">
1373+
Submit
1374+
</button>
1375+
</Form>
1376+
);
1377+
}
1378+
1379+
assertLocation(testWindow, "/base/path");
1380+
expect(getHtml(container)).toMatchInlineSnapshot(`
1381+
"<div>
1382+
<form
1383+
action=\\"/base/path\\"
1384+
method=\\"get\\"
1385+
>
1386+
<p>
1387+
/path
1388+
</p>
1389+
<input
1390+
name=\\"a\\"
1391+
value=\\"1\\"
1392+
/>
1393+
<button
1394+
name=\\"b\\"
1395+
type=\\"submit\\"
1396+
value=\\"2\\"
1397+
>
1398+
Submit
1399+
</button>
1400+
</form>
1401+
</div>"
1402+
`);
1403+
1404+
fireEvent.click(screen.getByText("Submit"));
1405+
assertLocation(testWindow, "/base/path", "?a=1&b=2");
1406+
expect(getHtml(container)).toMatchInlineSnapshot(`
1407+
"<div>
1408+
<form
1409+
action=\\"/base/path?a=1&b=2\\"
1410+
method=\\"get\\"
1411+
>
1412+
<p>
1413+
/path?a=1&b=2
1414+
</p>
1415+
<input
1416+
name=\\"a\\"
1417+
value=\\"1\\"
1418+
/>
1419+
<button
1420+
name=\\"b\\"
1421+
type=\\"submit\\"
1422+
value=\\"2\\"
1423+
>
1424+
Submit
1425+
</button>
1426+
</form>
1427+
</div>"
1428+
`);
1429+
});
1430+
1431+
it('supports a basename on <Form method="post">', async () => {
1432+
let testWindow = getWindow("/base/path");
1433+
let { container } = render(
1434+
<TestDataRouter basename="/base" window={testWindow} hydrationData={{}}>
1435+
<Route path="path" action={() => "action data"} element={<Comp />} />
1436+
</TestDataRouter>
1437+
);
1438+
1439+
function Comp() {
1440+
let location = useLocation();
1441+
let data = useActionData() as string | undefined;
1442+
return (
1443+
<Form
1444+
method="post"
1445+
onSubmit={(e) => {
1446+
// jsdom doesn't handle submitter so we add it here
1447+
// See https://github.com/jsdom/jsdom/issues/3117
1448+
// @ts-expect-error
1449+
e.nativeEvent.submitter = e.currentTarget.querySelector("button");
1450+
}}
1451+
>
1452+
<p>{location.pathname + location.search}</p>
1453+
{data && <p>{data}</p>}
1454+
<input name="a" defaultValue="1" />
1455+
<button type="submit" name="b" value="2">
1456+
Submit
1457+
</button>
1458+
</Form>
1459+
);
1460+
}
1461+
1462+
assertLocation(testWindow, "/base/path");
1463+
expect(getHtml(container)).toMatchInlineSnapshot(`
1464+
"<div>
1465+
<form
1466+
action=\\"/base/path\\"
1467+
method=\\"post\\"
1468+
>
1469+
<p>
1470+
/path
1471+
</p>
1472+
<input
1473+
name=\\"a\\"
1474+
value=\\"1\\"
1475+
/>
1476+
<button
1477+
name=\\"b\\"
1478+
type=\\"submit\\"
1479+
value=\\"2\\"
1480+
>
1481+
Submit
1482+
</button>
1483+
</form>
1484+
</div>"
1485+
`);
1486+
1487+
fireEvent.click(screen.getByText("Submit"));
1488+
await waitFor(() => screen.getByText("action data"));
1489+
assertLocation(testWindow, "/base/path");
1490+
expect(getHtml(container)).toMatchInlineSnapshot(`
1491+
"<div>
1492+
<form
1493+
action=\\"/base/path\\"
1494+
method=\\"post\\"
1495+
>
1496+
<p>
1497+
/path
1498+
</p>
1499+
<p>
1500+
action data
1501+
</p>
1502+
<input
1503+
name=\\"a\\"
1504+
value=\\"1\\"
1505+
/>
1506+
<button
1507+
name=\\"b\\"
1508+
type=\\"submit\\"
1509+
value=\\"2\\"
1510+
>
1511+
Submit
1512+
</button>
1513+
</form>
1514+
</div>"
1515+
`);
1516+
});
1517+
13321518
describe("<Form action>", () => {
13331519
function NoActionComponent() {
13341520
return (

‎packages/react-router-dom/index.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
useResolvedPath,
2222
UNSAFE_DataRouterContext as DataRouterContext,
2323
UNSAFE_DataRouterStateContext as DataRouterStateContext,
24+
UNSAFE_NavigationContext as NavigationContext,
2425
UNSAFE_RouteContext as RouteContext,
2526
UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,
2627
} from "react-router";
@@ -40,6 +41,7 @@ import {
4041
createBrowserHistory,
4142
createHashHistory,
4243
invariant,
44+
joinPaths,
4345
matchPath,
4446
} from "@remix-run/router";
4547

@@ -858,12 +860,15 @@ export function useFormAction(
858860
action?: string,
859861
{ relative }: { relative?: RelativeRoutingType } = {}
860862
): string {
863+
let { basename } = React.useContext(NavigationContext);
861864
let routeContext = React.useContext(RouteContext);
862865
invariant(routeContext, "useFormAction must be used inside a RouteContext");
863866

864867
let [match] = routeContext.matches.slice(-1);
865868
let resolvedAction = action ?? ".";
866-
let path = useResolvedPath(resolvedAction, { relative });
869+
// Shallow clone path so we can modify it below, otherwise we modify the
870+
// object referenced by useMemo inside useResolvedPath
871+
let path = { ...useResolvedPath(resolvedAction, { relative }) };
867872

868873
// Previously we set the default action to ".". The problem with this is that
869874
// `useResolvedPath(".")` excludes search params and the hash of the resolved
@@ -894,6 +899,15 @@ export function useFormAction(
894899
: "?index";
895900
}
896901

902+
// If we're operating within a basename, prepend it to the pathname prior
903+
// to creating the form action. If this is a root navigation, then just use
904+
// the raw basename which allows the basename to have full control over the
905+
// presence of a trailing slash on root actions
906+
if (basename !== "/") {
907+
path.pathname =
908+
path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
909+
}
910+
897911
return createPath(path);
898912
}
899913

0 commit comments

Comments
 (0)