TanStack / TanStack/router

Link should accept external links

Open
#4,901 10 comments 43 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement package: react-router types
Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

The Link component, custom link components created with createLink() and possibly linkOptions() only accept internal links but should accept external links (https, mailto, tel, ...) as well.

The Link component could simply be replaced with a plain a element when using external links, but custom link components are often styled or may provide additional behavior which we want to use for external links as well.

There's already a check implemented for external links and passing an external URL for the to prop actually works at runtime but not on a type-level.

https://github.com/TanStack/router/blob/ef74fc661bb82cbc415fcc6645cffcaec9b3b8b7/packages/react-router/src/link.tsx#L88-L94

Your Example Website or App

https://stackblitz.com/edit/github-qe1tnt6t?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

The external links <Link to="https://..." /> work at runtime but produce a TS error.
The link with just <Link href="https://..." /> doesn't work at runtime and also produces a TS error (because to is required).

Expected behavior

There should be a way to use (custom) link components with external links without TypeScript errors.

Screenshots or Videos

No response

Platform
  • Router / Start Version: 1.131.2
  • OS: macOS
  • Browser: Brave
  • Browser Version: 1.81.31
  • Bundler: Vite
  • Bundler Version: 6.3.5
Additional context

Related discussion on Discord: https://discord.com/channels/719702312431386674/1391990807225171968

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the external-link check in packages/react-router/src/link.tsx at the referenced lines, then run the linked StackBlitz reproduction. Trace the types for Link, createLink(), and linkOptions(); done means external URLs such as https, mailto, and tel are accepted without TypeScript errors and the existing runtime behavior remains usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.