TanStack / TanStack/router

Keyboard activation causes full page reload instead of SPA navigation when using custom link with React Aria

Open
#7,088 0 comments 0 reactions 0 assignees View on GitHub

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

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
  1. Create a custom link component using React Aria's Link with either createLink() or _asChild
  2. Render two routes (e.g. / and /development)
  3. Click a link with the mouse → observe client-side navigation ✅
  4. 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

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

Reproduce the issue in the linked StackBlitz example using both the createLink() and _asChild approaches, then inspect the custom-link integration and keyboard activation path. Done means pressing Enter on either custom link performs client-side SPA navigation without a full page reload, matching mouse-click behavior.

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.