Support use of external links when using `useHref` in `RouterProvider`

[Niznikr]

Provide a general summary of the feature here

The enhancements from #5864 have been great to support features we use from React Router. We are running into an issue though with the fact that when passing useHref to RouterProvider we lose the ability to use external links as all RAC href values get passed to useHref. It would be convenient to have a way to opt-out of useHref or detect an external link so both kinds can exist in an app.

🤔 Expected Behavior?

Set useHref in RouterProvider with React Router's version. There is a way to pass https://www.google.com to a RAC href prop and opt-out of passing it to useHref so that the final value is https://www.google.com.

😯 Current Behavior

Set useHref in RouterProvider with React Router's version. Passing https://www.google.com to a RAC href prop results in [current_url]/https://www.google.com.

💁 Possible Solution

Add an optional prop for RAC where href and routerOptions are available to opt-out of passing it through useHref or detect an external link similar to how RR does this https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/index.tsx#L958-L982

🔦 Context

I want RAC links to support both client-side routing and external links simultaneously when using useHref in RouterProvider.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Could you wrap React Router's useHref in your own function and determine whether to return https://www.google.com or [current_url]/https://www.google.com. and pass that into RouterProvider?

[theMosaad]

For anyone coming here looking for a copy-pastable solution

function useAbsoluteHref(path: string) {
  const relative = useHref(path);
  if (
    path.startsWith("https://") ||
    path.startsWith("http://") ||
    path.startsWith("mailto:")
  ) {
    return path;
  }
  return relative;
}

source: https://github.com/argos-ci/argos/blob/4822931b05c78e1b4a79e15cf4437fb0297369a6/apps/frontend/src/router.tsx#L21-L31

[evadecker]

Not the prettiest, but I was able to extend href support when using React-Aria and TanStack Router with the following:

// __root.tsx

import {
  type NavigateOptions,
  Outlet,
  type ToOptions,
  createRootRouteWithContext,
  useRouter,
} from "@tanstack/react-router";
import { RouterProvider } from "react-aria-components";

declare module "react-aria-components" {
  interface RouterConfig {
    href: ToOptions | string;
    routerOptions: Omit<NavigateOptions, keyof ToOptions>;
  }
}

export const Route = createRootRoute()({
  component: RootRoute,
});

function RootRoute() {
  const router = useRouter();

  return (
    <RouterProvider
      navigate={(path, options) =>
        router.navigate(
          typeof path === "string" ? { ...options } : { ...path, ...options },
        )
      }
      useHref={(path) =>
        typeof path === "string" ? path : router.buildLocation(path).href
      }
    >
      <Outlet />
    </RouterProvider>
  );
}

typeof path === "string" assumes an external link, while ToOptions is used for internal routing.

In your component you'd use:

// External links are strings
<Link href="https://github.com">GitHub</Link>

// Internal links are ToOptions objects
<Link href={{ to: '/about' }}>About</Link>

This supports params as well:

const myPostId = ...; // fetch param info

// Add params to your link
<Link href={{ to: '/post/$postId', { params: { postId: myPostId } }}>View Post</Link>

[christofferbergj]

My two cents for TanStack Router.

declare module 'react-aria-components' {
  interface RouterConfig {
    href: ToOptions['to'] | (string & {})
    routerOptions: Omit<NavigateOptions, keyof ToOptions>
  }
}

<RouterProvider
  navigate={(to, options) => router.navigate({ to, ...options })}
  useHref={(to) => buildHref(to, router)}
>
  <Outlet />
</RouterProvider>

const ABSOLUTE_URL_PREFIXES = ['https://', 'http://', 'mailto:'] as const

function buildHref(to: ToOptions['to'] | (string & {}), router: RegisteredRouter): string {
  if (!to) return ''

  if (ABSOLUTE_URL_PREFIXES.some((prefix) => to.startsWith(prefix))) {
    return to
  }

  return router.buildLocation({ to }).href
}

[universse]

For anyone coming here looking for a copy-pastable solution

function useAbsoluteHref(path: string) {
const relative = useHref(path);
if (
path.startsWith("https://") ||
path.startsWith("http://") ||
path.startsWith("mailto:")
) {
return path;
}
return relative;
}

source: https://github.com/argos-ci/argos/blob/4822931b05c78e1b4a79e15cf4437fb0297369a6/apps/frontend/src/router.tsx#L21-L31

Does this still work? It gives the correct href but when clicking, it navigates to the wrong URL eg http://localhost:3000/basename/https://www.google.com

[theMosaad]

Does this still work? It gives the correct href but when clicking, it navigates to the wrong URL eg http://localhost:3000/basename/https://www.google.com

Can you share a reproduction or the versions of react-router/remix and react-aria?

[universse]

Hi my bad. It was not an external link but a same-origin absolute link whose pathname does not start with basename. Something like https://example.com/api when basename is /app. After some investigation, it seems RAC Link considers it an internal link and use react-router's navigate, which only supports pathname and not absolute link.

There's a reproduction here https://stackblitz.com/edit/vitejs-vite-3j7p5edf?file=src%2FApp.tsx.

// basename is '/app'

<Link href="/api">Link</Link> // -> /app/api
<Link href="https://example.com/api">Link</Link> // -> https://example.com/app/https://example.com/api

[theMosaad]

Hi my bad. It was not an external link but a same-origin absolute link whose pathname does not start with basename. Something like https://example.com/api when basename is /app. After some investigation, it seems RAC Link considers it an internal link and use react-router's navigate, which only supports pathname and not absolute link.

There's a reproduction here https://stackblitz.com/edit/vitejs-vite-3j7p5edf?file=src%2FApp.tsx.

// basename is '/app'

Link // -> /app/api Link // -> https://example.com/app/https://example.com/api

Ah, I see the issue. I think the cause is React Aria's shouldClientNavigate function, specifically this line

react-spectrum/packages/@react-aria/utils/src/openLink.tsx

Line 80 in a792c1a

link.origin === location.origin &&

A workaround might be to intercept the path before passing it to React Router's navigate function as below

<RACRouterProvider
  navigate={(path, routerOptions) => {
    const isSameOriginAbsolutePath = true; // TODO: add the logic for detecting same origin absolute paths
    if (isSameOriginAbsolutePath) {
      window.open(path, '_self');
      return;
    }

    navigate(path, routerOptions);
  }}
  useHref={useAbsoluteHref}
>

[universse]

Thank you for taking a look. For the above workaround, there's a need to replicate all the behavior of <a> tag, which is anyway handled by RAC already. My current workaround is to use a Button that sets window.location.href. Not ideal so hope this gets fixed.

[OliverJAsh]

My two cents for React Router. Includes support for same origin absolute links.

import { useCallback, type FC } from 'react';
import { RouterProvider } from 'react-aria-components';
import {
  type NavigateFunction,
  type NavigateOptions,
  type To,
  useHref as useReactRouterHref,
  useNavigate as useReactRouterNavigate,
} from 'react-router';

declare module 'react-aria-components' {
  interface RouterConfig {
    routerOptions: NavigateOptions;
    href: To;
  }
}

const isToAbsolute = (to: To): to is string =>
  typeof to === 'string' &&
  (to.startsWith('https://') ||
    to.startsWith('http://') ||
    to.startsWith('mailto:'));

// See https://github.com/adobe/react-spectrum/issues/6397.
const useHref = (to: To): string => {
  const reactRouterHref = useReactRouterHref(to);
  return isToAbsolute(to) ? to : reactRouterHref;
};

// See https://github.com/adobe/react-spectrum/issues/6397.
const useNavigate = (): NavigateFunction => {
  const reactRouterNavigate = useReactRouterNavigate();
  return useCallback(
    (p) => {
      if (typeof p === 'number') return reactRouterNavigate(p);
      if (isToAbsolute(p)) {
        window.location.href = p;
      } else {
        return reactRouterNavigate(p);
      }
    },
    [reactRouterNavigate],
  );
};

const Root: FC = () => {
  const navigate = useNavigate();
  return (
    <RouterProvider navigate={navigate} useHref={useHref}>
      {children}
    </RouterProvider>
  );
};