@adrienlcp/react-router

For apps whose links are react-aria-components and whose routes are react-router: the wiring every one of them repeats, kept in one version across them. React 19, react-aria-components and react-router are peers.

pnpm add @adrienlcp/react-router

import { AriaRouterProvider } from '@adrienlcp/react-router'
import { ViewTransition } from 'react'
import { Outlet, useLocation } from 'react-router'

export const RootRoute: React.FC = () => {
  const { pathname } = useLocation()

  return (
    <AriaRouterProvider>
      <ViewTransition default="none" enter="auto" exit="auto" key={pathname}>
        <Outlet />
      </ViewTransition>
    </AriaRouterProvider>
  )
}

react-router wraps its updates in startTransition, so React's <ViewTransition> animates each navigation; keyed on the path with default="none", it animates only a change of page, not the loads and reloads of data in between. Leave react-router's own viewTransition option off: it starts the transition outside React. @adrienlcp/styles/reduced-motion.css stills it for a reader who asked for less motion.

Mounted in the root route's element, inside the router, it hands react-aria's RouterProvider react-router's navigate: an href on any react-aria Link, MenuItem or ListBoxItem below it becomes a client-side navigation instead of a page load.

• routerOptions are typed and forwarded. Importing anything from this package augments react-aria's RouterConfig, so routerOptions on every react-aria link is react-router's NavigateOptions: <Link href={paths.settings} routerOptions={{ replace: true }}>. Drop the app's own declare module 'react-aria-components' block.
• navigateDefaults is read when each navigation happens, not when the provider renders, so a default computed from live state follows a change made mid-session. A link's own routerOptions override it.
• A superseded navigation is not an error. One navigation cut short by the next rejects with AbortError, more often while a view transition runs; that rejection is swallowed, any other one is not.
• Give links absolute paths. A relative href is displayed resolved against the link's route, but navigate runs from the root route.

react-router's useHref resolves every href against the current route, an external URL included: https://example.com would come out as /current/route/https:/example.com. useRouterHref returns an absolute URL untouched and defers to useHref for the rest. AriaRouterProvider already uses it; it is exported for an app that wires RouterProvider itself.

The .catch handler behind the provider, for an app that calls navigate itself: Promise.resolve(navigate(to)).catch(ignoreSupersededNavigation) swallows the AbortError of a superseded navigation and throws anything else again.