Client Side Routing
Many React Aria components support rendering as HTML links. This page discusses how to set up your app to integrate React Aria links with your framework or client side router.
Introduction
React Aria components such as Link, Menu, Tabs, Table, and many others support rendering elements as links that perform navigation when the user interacts with them. Each component that supports link behavior accepts the href prop, which causes the component to render an <a> element. Other link DOM props such as target and download are also supported.
Depending on the component, users may interact with links in different ways. For example, users can navigate between tabs using the arrow keys, or open a link in a ComboBox using the enter key. Because React Aria components accept the href prop rather than supporting arbitrary element overrides, they can ensure that link navigation occurs when it is appropriate for the component.
By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The RouterProvider component configures all React Aria components within it to navigate using the client side router you provide. Set this up once in the root of your app, and any React Aria component with the href prop will automatically navigate using your router.
Note that external links to different origins will not trigger client side routing, and will use native browser navigation. Additionally, if the link has a target other than "_self", uses the download attribute, or the user presses modifier keys such as Command or Alt to change the default behavior, browser native navigation will occur instead of client side routing.
Router Provider
The RouterProvider component takes two props: navigate and useHref. Set navigate to a function from your router that handles client-side moves. useHref is optional and tweaks a router-specific href to a regular HTML href, like adding a base path. Here’s the basic setup. Peep the examples below for different frameworks.
Inertia.js
When using Inertia.js, you need to declare it your .d.ts file for example global.d.ts.
create a provider in your components folder components/providers.tsx and paste this code:
Then in your resources/js/app.tsx you can wrap <App/> within Provider like this:
Next.js
The useRouter hook from next/navigation returns a router object for navigation. RouterProvider should be rendered in a client component at the root of each page or layout with React Aria links. Create a new client component for this or combine it with other top-level providers as described in the Next.js docs.
Create new file providers.tsx in app folder.
Then in app/layout.tsx or your root layout, wrap the children with the ClientProviders component.
import { RouteProvider } from './provider'
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<html lang='en'>
<body>
<RouteProvider>{children}</RouteProvider>
</body>
</html>
)
}Others
You might not be using the framework or router provider mentioned above. If you're rocking a different router or framework, check out the React Aria Components Docs for more info.