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.