Client Side Routing

Introduction

React Aria components such as Link, Menu, Tabs, and Table transform elements into clickable links that navigate when clicked. These components utilize the href prop to render as an <a> tag, supporting attributes like target and download.

User interactions with these links vary by component. For instance, one might use arrow keys to navigate tabs or press enter to open a link within a ComboBox. With the href prop, React Aria facilitates seamless navigation for each component.

Typically, links perform the default browser action when clicked. However, many applications employ client-side routers to prevent full page reloads. The RouterProvider configures React Aria components to integrate with your client-side router. Simply set it up at the root, and any React Aria component with an href will automatically utilize your router.

Note that links to external sites will default to the browser's native navigation, and links not targeting "_self", using the download attribute, or modified with keys like Command or Alt, will also follow the browser's native behavior.

Router Provider

The RouterProvider component accepts two properties: navigate and useHref. Assign navigate to a function from your routing framework that handles client-side navigation. useHref is optional and modifies a router-specific href to a standard HTML href, such as by adding a base path. Below are setup examples for various frameworks.

import { RouterProvider } from 'react-aria-components';
import { useNavigate } from 'your-router';

export default function Layout() {
  let navigate = useNavigate();

  return (
    <RouterProvider navigate={navigate}>
      {/* ... */}
    </RouterProvider>
  );
}