[Bug]: pathless route throw no action method found

[nicolastoulemont]

What version of React Router are you using?

v6.4

Steps to Reproduce

Follow the react-router tutorial including the pathless route section

If implemented as suggested, the root action implemented earlier in the tutorial to create a contact will not work anymore.

Expected Behavior

The root action should work correctly or the tutorial should explain and provide a workaround.

Actual Behavior

React router will throw the following error :
react_devtools_backend.js:4026 ErrorResponse {status: 405, statusText: 'Method Not Allowed', data: 'No action found for [/]'}

Router configuration when the error happen:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage />, // <--- This seems to cause the error
        children: [
          { index: true, element: <Index /> },
          /* the rest of the routes */
        ],
      },
    ],
  },
])

Router configuration to remove the error and allow the action to be performed:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      { index: true, element: <Index /> }, // <--- Removing it solves the issue
     /* the rest of the routes */
    ],
  },
])

Nb: the following router config will remove the error but prevent the action to be performed:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage />,
        action: () => {},  // <--- Prevent error throwing but also prevent the rootAction of being run
        children: [
          { index: true, element: <Index /> },
          /* the rest of the routes */
        ],
      },
    ],
  },
])

[rago4]

Moving rootAction to the children solves this issue.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        errorElement: <ErrorPage />,
        action: rootAction, // 👈 move it here
        children: [
          // the rest of the routes
        ],
      },
    ],
  },
]);

[nicolastoulemont]

Moving rootAction to the children solves this issue.

Yes indeed, but I would think that it kind break the semantics (a comprehension benefits) of defining the action & loader of a route within its given route object. WYDT ?

[brophdawg11]

Thanks for the explanation! This looks like a bug as pathless layout routes should be ignored for form actions, and this should correctly find the root action. We'll get a fix in soon!

[nicolastoulemont]

Thanks for the explanation! This looks like a bug as pathless layout routes should be ignored for form actions, and this should correctly find the root action. We'll get a fix in soon!

Thanks !

[brophdawg11]

Merged the fix for this - should be available in a 6.4.3 hopefully later this week or next week 👍

[nicolastoulemont]

Thanks for your work @brophdawg11

[brophdawg11]

👋 Just did a prerelease (6.4.3-pre.0) which should fix this if you want to give it a shot!