Link should accept external links
Nobody has claimed this yet.
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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