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 />,
},

[mphasize]

Just stumbled across this discussion as I've been refactoring a Remix.run app towards React Router 7 and I saw the error message for the first time.

A difference between Remix and React Router that I have NOT seen mentioned in the upgrade guides so far, is that React Router needs an explicit loader function in a resource route (with the redirect). For Remix it was alright to only have an action function defined in the route.

https://remix.run/docs/en/main/guides/resource-routes vs. https://reactrouter.com/how-to/resource-routes

[sergiodxa]

You can totally have a route with only an action, that's not wrong, but if the user visits that URL directly Remix and RR will try to send a response to a GET request, to serve a GET request a route needs a loader and/or a component, if the route only has an action it won't be able to serve GET requests. Which is not a bad thing, but you will get a generic "405 Method Not Implemented" response.

Another thing is that if the action doesn't redirect, and you didn't used a fetcher (you used Form or useSubmit) to send the POST request, then Remix/RR will try to navigate there, so in that case your route needs a UI to render after navigation, if you don't have a UI you will need to do a redirect somewhere else.