useActionData to get response/errors for an external route

[kgautamt]

Problem Statement:

I'm trying to access the response returned by the action URL in the /admin component. The useActionData() hook works if the action is present in the same component.

How to access the response from /user/auth ?

// route/user/auth.tsx

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData()

  // code omitted for brevity

  const users = JSON.stringify({
    message: 'success',
    user: { email },
  })
  return new Response(users, {
    status: 200,
    headers: {
      location: '/admin',
    },
  })
}

// route/admin.tsx

export default function index() {
  const actionData = useActionData()

  return (
    <>
      <Form method="post" replace action="/user/auth"
        <input type="text" name="email" placeholder="email" />
        <input type="password" name="password" placeholder="password" />
        
        <button type="submit">submit</button>
      </Form>

      {actionData && <pre>{JSON.stringify(actionData, null, 2)}</pre>}
    </>
  )
}

NOTE: I prefer to have an external route for action than in the same components.

@kentcdodds @sergiodxa Any advice?

Also, Can some util be created to access the same? Like useRouteActionData(route/path) ?

[ccssmnn]

From the Docs:

This hook returns the JSON parsed data from your route action.

In your case, the action is not the route action. You can manually fetch with JS and receive the data there. Or you redirect in your action and provide the information via URL parameters.

[ccssmnn]

Also, when extracting your actions into their own route, use cases differ a lot, making it hard to provide utilities. But you can write your own utility for your action route use case and reuse that. Reusing that action from other routes too should be the reason for extracting it in the first place.