Proper useFormAction implementation that works with XHR

[akomm]

I use XHR for upload progress. Figured out useFormAction generates a URL that does not include the _data query parameter. This causes the loader to receive no headers/cookies and logging the user out.

So I created a proper hook to do that:

import {useLocation, useMatches} from "@remix-run/react"

export function useActionUrl() {
  const matches = useMatches()
  const location = useLocation()
  const self = matches.find(match => match.pathname === location.pathname)

  if (self) {
    return `${self.pathname}?_data=${encodeURIComponent(self.id)}`
  }

  return "."
}

Triggering reload can be done using useNavigate and the produced URL on demand. Shouldn't it be part of remix to get a proper URL that doesn't eject the user on loader re-run?