Using React Router 6, and the createBrowserRouter method.

I really like the way the Loaders and Actions can separate data fetching from the React components. However, I’m unclear on how to properly pass data between pages.

For example, I have a login page. The user submits the form, and I handle it in an Action, hit an api with the login details, and then I want to send the user to another page with the data from the login request.

function LoginAction async ({request}) {
  const response = await callLoginAPI(request.body);// or whatever
  if (response.ok) {
  // where do I put the response data?
    return redirect("/user-page");
  }

}

There are ways to inject redux into the action, but they seem hacky. We can’t pass data through the redirect. Can I return a POST request with the data in the body? That doesn’t seem like it’s a thing. Maybe I’m missing some functionality of React Router.

I guess the other option is to use the useActionData hook inside my Login component, then update redux from there, and redirect if the action returns data.