How to Get the Absolute URL on the Client Side in Remix?

[nikolailehbrink]

Hi everyone,

I'm trying to get the absolute URL on the client side and have run into a bit of confusion. I initially expected hooks like useHref, which explicitly states, that it resolves a full url to return the full URL, but it seems to only return relative paths.

To work around this, I created the following custom hook:

import { useEffect, useState } from "react";

export default function usePageUrl() {
  const [pageUrl, setPageUrl] = useState("");

  useEffect(() => {
    setPageUrl(window.location.href);
  }, []);

  return pageUrl;
}

While this works, I'm wondering if there's a "cleaner" or more idiomatic way to achieve this in Remix without relying on useEffect. Is there an existing hook or a better approach that avoids the need for side effects?

[kiliman]

When you say full URL, do you mean to include the origin too?

Instead of /some/route/path?a=123, do you want https://domain.com/some/route/path?a=123?

[nikolailehbrink]

Yes, exactly :)

[sergiodxa]

You could return request.url from a loader, that includes the origin too, but it doesn't include the hash as that part is not sent to servers by the browser.

If you want the hash you will need it client-side too.

[nikolailehbrink]

Thank you for your response! However, my goal is to find a straightforward way to retrieve the origin and pathname, or simply the full window.location.href, without relying on useEffect on the client side. My intention is to display this URL so it can be copied using navigator.clipboard.

The approach I’ve used works well with the custom hook I mentioned, but I was hoping to leverage one of the built-in hooks in Remix for this purpose. I came across the useHref hook, and since the href property in the Location interface of JavaScript typically provides the complete URL (including the origin), I assumed it would work here. However, I found that useHref only returns the pathname, which I find somewhat misleading given its name.

[sergiodxa]

Client-side you should use an effect, the component render is not only client-side (it runs server-side) that's why Remix hooks only gives you the pathname, the origin can be anything (Remix and RR doesn't handle that part).

I would return the origin from a loader

export async function loader({ request }: LoaderFunctionArgs) {
  let url = new URL(request.url)
  return json({ origin: url.origin, pathname: url.pathname })
}

Another option could be to use window.location.href in entry.client (this runs 100% client-side) and use a custom context to make it globally available for React, and since your components run server-side you will need the same context in entry.server where you can also get the origin and pathname from the request.url there.

[nikolailehbrink]

Will do that and thank you very much for the explanation! @sergiodxa