Actions without elements

[bouzlibop]

In the React Router Tutorial in the Deleting Records section it is described that in order to handle delete one can create a new Route:

{
    path: "contacts/:contactId/destroy",
    action: destroyAction,
},

Is this the best/recommended way for handling such interactions?

I wonder because now we end up with a Route without an element. If the user navigates to /contacts/:contactId/destroy then he will see an empty page. There will also be a warning logged:

Matched leaf route at location "/contacts/guqm1is/destroy" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

[gustavopch]

Are you redirecting as in the example?

export async function action({ params }) {
  await deleteContact(params.contactId);
  return redirect("/"); <------
}

[gustavopch]

Wait, why would the user navigate to that page?

[bouzlibop]

I would say that usually we want to somehow let the user know whether the page of the url he typed exists or not. We either display the page or No Match 404 page. And here with /contacts/:contactId/destroy we have strange situation - the page for this URL does not exists and yet we don't handle it gracefully.

[gustavopch]

But the resource does exist, right? It just doesn't accept the GET method. It's a 405. You can either define a loader and redirect if someone tries to access that route or define a component that shows a message.

[bouzlibop]

Yes, exactly this is my point. There should be some logic defined for handling such case and it is missing from the tutorial.
I wonder why React Router does not render the error element for such cases.

[sergiodxa]

When a route doesn't have an element it's a resource route, essentially an API route, in that case you should add a loader and return the 405 manually if you want to customize it, or if you want to render the error element, add an (non error) element, in the loader throw a 405 response and that will render the error element, the non error element can be just a null.

[bouzlibop]

... in that case you should add a loader and return the 405 manually if you want to customize it ...

@sergiodxa could you give me an example of what do you mean? Let's say I have something like in the loader:

return new Response('', {
    status: 405,
    statusText: 'Method Not Allowed',
    headers: {
      Allow: 'POST',
    },
  });

How would you "customize it"?

[bouzlibop]

BTW 405 should probably be returned when the method was implemented but it is not allowed. In case the method is not implemented 501 Not Implemented might be a better choice.

[gustavopch]

I understand the opposite from MDN:

501 is the appropriate response when the server does not recognize the request method and is incapable of supporting it for any resource.
— https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/501

So if it's a specific resource that doesn't support that method, 501 is not appropriate.

[gustavopch]

How would you "customize it"?

Render a component in that route that will receive the error and show the message accordingly. For example:

{
    path: "contacts/:contactId/destroy",
    loader: methodNotAvailableLoader,
    action: destroyAction,
    element: <MethodNotAvailableError />,
},