How can I use redirect with defer?

[landisdesign]

Currently it appears that defer is the preferred method to show a "loading" UI while waiting for a loader to resolve its data. But what if the loader can return a redirect? Is this something that needs to be handled using useNavigate, or is there a way to keep this all within the loader?

[adrienbaron]

Got the same issue right now, for now I might end up handing that in the component using useNavigate, but that doesn't feel super clean 🤷

[MarisaCodes]

I don't like that we cannot return redirect("/") inside a loader using defer.

According to the docs: Why don't Response objects returned by the loader work anymore?

When you use defer, you're telling React Router to load the page immediately, without the deferred data. The page is already loaded before the Response object is returned so responses are not automatically processed in the same way as if you had done return fetch(url).
Therefore, you will need to handle your own Response processing and resolve your deferred Promise with data, not a Response instance

For me this resulted in a syntax that looks like this where I end up resolving the same promise twice:

  const data = useLoaderData();
  const navigate = useNavigate();

  data.data?.then((data) => {
    if (data === 302) {
      navigate("/");
    }
//... some code
<Await resolve={data.data} errorElement={<Error />}>
  {/*some code*/}
</Await>
  });

I don't know if there is a cleaner fix, would appreciate it!