Skip to content

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

@lyhoang-web-dev

Description

@lyhoang-web-dev

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions