navigate to external url with tanstack router / start

[thibaultdenis014]

Which project does this relate to?

Router

Describe the bug

Hey everyone,

I couldnt find how to navigate to an external url using tanstack router / start. I tried to search in the docs for it but couldn't find anything.

I am currently doing it in this way but I am wondering if tanstack router supports a better way to navigate to an external url ? Especially with the new useTransition hook that can be used to track redirecting, which is very usefull to show some sort of spinner while redirecting.

function Home() {
  const [isRedirectPending, startRedirectTransition] = useTransition();

  const navigatingTo = (url: string) => {
    startRedirectTransition(async () => {
      window.location.href = url;
    });
  };

  return (
    <main>
      <button
        onClick={() => {
          navigatingTo('https://stopjava.com/');
        }}
      >
        redirect to site
      </button>

      {isRedirectPending && <p>redirecting...</p>}
    </main>
  );
}

Your Example Website or App

https://stackblitz.com/edit/github-ynarx9vs?file=app%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

• set the network speed to 3g and disabled caching in the network tab
• click the navigate button from the repro link above

Expected behavior

• navigating to an external url
• using the useTransition hook to track redirecting

Screenshots or Videos

Screencast.From.2025-01-25.16-52-58.webm

Platform

• OS: Nixos
• Browser: Chrome
• Version: 131.0.6778.204 (Official Build) (64-bit)

Additional context

No response

[Ryanjso]

You can just use the native html <a href="" /> tag since you don't need any of the typesafety you use for internal routes

[thibaultdenis014]

Yes your are correct but this is a simplifed example.

This issue will happen for example when setting up oauth. With the example below I just can't use an anchor unfortunately:

const useGithubSignIn = () => {
  const [isRedirectPending, startRedirectTransition] = useTransition();

  const githubSignIn = useMutation({
    mutationFn: githubSignInAction,
    onSuccess: (url) => {
      startRedirectTransition(async () => {
        window.location.href = url;
      });
    },
  });

  return {
    ...githubSignIn,
    isPending: githubSignIn.isPending || isRedirectPending,
  };
};

[isnifer]

@thibaultdenis014 why do you think router should support this? The main purpose of Tanstack Router is to help you to navigate on your own site

[thibaultdenis014]

Nextjs supports this, and it gives a very nice user experience when redirecting to antoher website.

For example when using oauth, I want to display a loading spinner when the user is getting redirected (as those sort of redirects take around 1/2 sec with a decent connection). Below is an example of doing that with nextjs + the useTransition hook to monitor the redirecting. Which is what I want to reproduce with tanstack router.

//nextjs - not tanstack router / start
export const GithubSignIn = () => {
  const router = useRouter();
  const [isRedirectPending, startRedirectTransition] = useTransition();

  const githubSignIn = api.auth.githubSignIn.useMutation({
    onSuccess: (url) => {
      startRedirectTransition(() => {
        router.push(url.href);
      });
    },
  });

  return (
      <Button
        className="mt-3 w-full gap-2 bg-black font-bold text-white hover:bg-black/80"
        disabled={githubSignIn.isPending || isRedirectPending}
        onClick={() =>
          githubSignIn.mutate({ callbackUrl: searchParams.get("callback-url") })
        }
      >
        <GithubIcon />
        <span>github</span>
        {(githubSignIn.isPending || isRedirectPending) && <Spinner />}
      </Button>
      )}
  );
};

[empowerDon]

was looking for something simiar, found this note on the NavigateOptionsType re: the href property

"...navigate to a fully built href, e.g. pointing to an external target.`

It didn't appear to be working at first but dug into the code and seems like the href param is only considered when the reloadDocument option is true, at which point it works.

(under the hood its just assigning window.location the same way you are though 🤷 )

eg

const nav = useNavigate();

if(shouldRedirect) {
  nav({
    href: "https://github.com/TanStack/router/issues/3232",
    reloadDocument: true,
  })
}