[Bug]: useResolvedPath breaks <Form> when used in a splat route

[CapitaineToinon]

What version of React Router are you using?

6.16.0

Steps to Reproduce

https://stackblitz.com/edit/github-btbhnm?file=src%2FApp.tsx

Create a simple splat route:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: '',
        element: <Home />,
        loader: homeLoader,
      },
      {
        path: 'admin/pages/*',
        element: <Test />,
        loader: pageLoader,
        action: pageAction,
      },
    ],
  },
]);

Inside your splat route, use a <Form method="post"> without explicit action attribute:

<Form method="post">
    <input defaultValue={content} name="content" />
    <button>submit</button>
</Form>

Navigate to, for example, /admin/pages/hello/world and submit your form to, for example, update your page in the database or whatever, using the following action:

const pageAction = async ({ request, params }: LoaderFunctionArgs) => {
  if (!params['*']) {
    throw new Response(null, {
      status: 400,
    });
  }

  const formData = await request.formData();
  pages.set(params['*'], formData.get('content')?.toString() ?? '');

  return redirect('/');
};

Expected Behavior

The form should submit to /admin/pages/hello/world (or whatever route it's currently on) when no action attribute has been specified.

Actual Behavior

Inspect the dom and you'll see the form generated form has /admin/pages for an action:

<form method="post" action="/admin/pages"><input name="content" value="hello"><button>submit</button></form>

This will break your action code that expects a value inside your params["*"] object.

I deep a deep dive and found that internally, the Form will use useResolvedPath(".") when no action is specifed and that hook already seems to return the top of the path for splat routes, in this example always /admin/pages. However, calling useResolvedPath(useLocation().pathname) will find the splat route correctly.

So it seems that the special case of resolving "." doesn't work as expected in splat routes.

[brophdawg11]

Thanks for the issue and thorough investigation!

[brophdawg11]

This is resolved by #10933 and will be available in the next release.

[brophdawg11]

We had to revert #10933 in #10965 because it broke useFormAction in some use cases from a parent layout route. I'll be taking another stab at a fix in a new PR but it likely won't land in the upcoming release.

[github-actions]

🤖 Hello there,

We just published version 6.18.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.18.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

No no silly bot - this was fixed but reverted - this is still an issue in 6.18.0.

[brophdawg11]

ok, this is fixed again in #10983 - should be out in the next release

[github-actions]

🤖 Hello there,

We just published version 6.19.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.19.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

FYI - it turns out a large number of existing apps were relying on this buggy behavior so we decided to revert this and we will re-release the fix behind a future flag in the next minor release (see #11052 (comment)).