How to get a hash from url in clientLoader?

[jbojcic1]

When I need to read url parts (pathname, search etc) from clientLoader I do:

export async function clientLoader({ request }: Route.ClientLoaderArgs) {
  const location = new URL(request.url);
  ...

but request.url doesn't have a hash so my location.hash will not be set. How do I work around that?

I can get the hash by using window.location.hash but that works only for initial load because on subsequent navigations window.location still shows old/current location when clientLoader runs

[CoderDeltaLAN]

Context

• Remix loader/action
• Need to send custom response headers (e.g. caching, CORS, custom metadata)

Why
By default Remix loaders return plain data or use json(). If you need custom headers, you must pass them explicitly to json() or new Response().

Fix (minimum viable)

Option A — use json() helper with headers

import { json } from "@remix-run/node"

export async function loader() {
  const data = { message: "ok" }
  return json(data, {
    headers: {
      "Cache-Control": "max-age=60",  // 1 min
      "X-Custom": "demo",
    },
  })
}

Option B — return raw Response

export async function loader() {
  const text = "Hello, world!"
  return new Response(text, {
    status: 200,
    headers: {
      "Content-Type": "text/plain; charset=utf-8",
      "X-Example": "true",
    },
  })
}

Option C — merge headers

import { json } from "@remix-run/node"

export async function loader() {
  const headers = new Headers()
  headers.set("Cache-Control", "private, max-age=0")
  headers.set("X-Powered-By", "Remix")

  return json({ status: "ok" }, { headers })
}

Checklist

• Always include Content-Type when sending raw Response.
• Use json() for JSON, redirect() for redirects, defer() for streaming.
• headers() helper is for reading headers from a request, not setting them. To set headers, pass them in the response object.

Docs

• Remix responses: https://remix.run/docs/en/main/utils/json
• MDN Response API: https://developer.mozilla.org/docs/Web/API/Response/Response

If this helps, please Mark as answer so others can find it.

[jbojcic1]

I don't understand how that answers my question. clientLoader

[CoderDeltaLAN]

Thanks for clarifying — I now see your question is specifically about clientLoader (client-side), not the server loader.

In a clientLoader you have access to the browser APIs, so you can read the hash fragment directly from window.location.hash or from the URL object:

import type { ClientLoaderFunctionArgs } from "@remix-run/react";

export async function clientLoader({ request }: ClientLoaderFunctionArgs) {
  const url = new URL(request.url);
  // From the full URL
  const hashFromURL = url.hash; 
  
  // Or directly from window if you need
  const hashFromWindow = window.location.hash;

  return { hash: hashFromURL || hashFromWindow };
}

[sergiodxa]

@jbojcic1 this looks AI generated, which explains how it answered something else first

[sergiodxa]

As you saw location.hash will always lag behind, this is because the navigation doesn't happen until after your clientLoader returns, so the URL is not updated yet, what do you need to read from the hash? is this something you could convert to a search param?

[jbojcic1]

I can't convert it. The data is sensitive and it's a page that has server loader too so using query param would send that data to server if I am not wrong

I worked around it by doing window.history.replaceState(null, '', hash); before triggering navigation so then I can do location.hash in clientLoader but it's hacky and would be nice to have a better way.

[tt-a1i]

[jbojcic1]

1 and 3 make it lot more complex then it is when handled in clientLoader. 4 is not an option because there is a reason why the hash is used (you don't want that data ever to be sent to the server). 2 is decent and similar to workaround I did that is explained #10721 (reply in thread).

[SX110903]

el hash no esta disponible en request.url porque el navegador nunca lo manda al servidor, es solo del lado del cliente. por eso window.location.hash es la unica forma real de pillarlo

si lo necesitas en el clientLoader puedes hacer algo asi:

export async function clientLoader({ request }: Route.ClientLoaderArgs) {
  const url = new URL(request.url)
  const hash = typeof window !== "undefined" ? window.location.hash : ""
  // ya tienes el hash
}

aunque si lo que quieres es reaccionar a cambios de hash te conviene mas usar un useEffect con un listener en el componente directamente, el clientLoader no se re-ejecuta cuando cambia el hash