Which project does this relate to?
Router
Describe the bug
When using a custom link component that wraps TanStack Router's Link with React Aria's Link — via either the
createLink() approach or the internal _asChild prop — keyboard activation (pressing Enter) triggers a full
page reload instead of client-side SPA navigation.
Mouse click works correctly (client-side navigation). The issue is keyboard-only.
Both approaches are affected:
// Approach 1 — createLink()
// https://tanstack.com/router/latest/docs/guide/custom-link
const CustomLink = createLink(AriaLink);
<CustomLink to="/development">Development</CustomLink>
// Approach 2 — _asChild
<RouterLink to="/development" _asChild={AriaLink}>
Development
</RouterLink>
The root cause is likely a mismatch between event models:
- TanStack Router intercepts
onClick and calls e.preventDefault() to prevent native navigation
- React Aria uses
onPress as its primary activation model and dispatches a synthetic click on keyboard
activation (Enter)
- This synthetic click may bypass TSR's
onClick handler, causing the browser to fall back to native href
navigation → full page reload
Your Example Website or App
https://stackblitz.com/edit/vitejs-vite-2xxlupse
Steps to Reproduce the Bug or Issue
- Create a custom link component using React Aria's
Link with either createLink() or _asChild
- Render two routes (e.g.
/ and /development)
- Click a link with the mouse → observe client-side navigation ✅
- Focus the same link and press
Enter → observe full page reload ❌
Expected behavior
Pressing Enter on a custom link should trigger client-side SPA navigation, identical to mouse click behavior.
e.preventDefault() should be called to prevent the browser from following the href natively.
Screenshots or Videos
No response
Platform
- Router Version: 1.168.10
- OS: macOS, Windows, Linux
- Browser: Chrome, Safari, Firefox
- Bundler: Vite
- Bundler Version: 8.0.3
Additional context
No response
Which project does this relate to?
Router
Describe the bug
When using a custom link component that wraps TanStack Router's
Linkwith React Aria'sLink— via either thecreateLink()approach or the internal_asChildprop — keyboard activation (pressingEnter) triggers a fullpage reload instead of client-side SPA navigation.
Mouse click works correctly (client-side navigation). The issue is keyboard-only.
Both approaches are affected:
The root cause is likely a mismatch between event models:
onClickand callse.preventDefault()to prevent native navigationonPressas its primary activation model and dispatches a synthetic click on keyboardactivation (
Enter)onClickhandler, causing the browser to fall back to nativehrefnavigation → full page reload
Your Example Website or App
https://stackblitz.com/edit/vitejs-vite-2xxlupse
Steps to Reproduce the Bug or Issue
Linkwith eithercreateLink()or_asChild/and/development)Enter→ observe full page reload ❌Expected behavior
Pressing
Enteron a custom link should trigger client-side SPA navigation, identical to mouse click behavior.e.preventDefault()should be called to prevent the browser from following thehrefnatively.Screenshots or Videos
No response
Platform
Additional context
No response