React router v7 POST request not triggering action

[MattFanto]

Hello I have a react-router route that I use to render and print programmatically (using CURL or nodejs fetch) a detail-page based on request input data.

Initially I used query-params and fetch them using the loader, but then I realized the URL + queryparm was too long and hitting some limitation in the backend

Because of that I decided to switch from GET to POST and use action instead of loader but apparently whenever I do a POST request no matter the Content-Type (application/json , multi-part/form, ...) the action is never invoked and the loader instead interpret somehow the request as GET and therefore loosing the body content of the POST

Do anybody know how to render a page in react-router using POST instead of GET?

Here is my code:

// Handle GET requests
export async function loader({ request, params }) {
    console.log(request)
    const url = new URL(request.url)
    const sessionContextParam = url.searchParams.get("sessionContext")

    if (!sessionContextParam) {
        return {}
        throw new Error("sessionContext query parameter is required")
    }

    let sessionContext = JSON.parse(sessionContextParam)
    sessionContext = ObjectSerializer.deserialize(sessionContext)

    return { sessionContext }
}

// Handle POST requests
export async function action({ request, params }) {
    const formData = await request.formData()
    const sessionContextParam = formData.get("sessionContext")
    console.log(formData, sessionContextParam)

    if (!sessionContextParam) {
        return {}
    }

    let sessionContext = JSON.parse(sessionContextParam as string)
    sessionContext = ObjectSerializer.deserialize(sessionContext)
    console.log(sessionContext)

    return { sessionContext }
}

export default function Home({loaderData, actionData}) {
    console.log("action data", actionData)
    const { sessionContext } = actionData
    return (
        <QueryClientProvider client={queryClient}>
            <AuthContext.Provider value={{...sessionContext, sessionInfo: () => new Promise(loaderData)}}>
                <Outlet/>
            </AuthContext.Provider>
        </QueryClientProvider>
    )
}

[sergiodxa]

I tried to replicate your issues here https://stackblitz.com/edit/github-ovtvaqwc?file=app%2Froutes%2Fhome.tsx, and it seems to work.

I created a route with a loader and an action, and I render a message with the request.method, along a form that will do a document request with method POST. When you first enter the browser does a GET but when you submit the form it does a POST and show that on the UI.