RouterProvider
Provider for easier handling routing.
The <RouterProvider> is a component from react-aria-components which we expose to give you a simple way to handle your routes in your application.
Usage
The <RouterProvider> is a context provider that integrates React Aria's navigation system with your router (like React Router, Next.js, or custom routing). It enables accessibility-aware navigation by informing components (like <Link> and useRouter) about the current location and navigation methods.
React Router
You can use the provider with the useNavigate hook from react-router-dom. The outcome from the function you can pass into the navigate prop from the <RouterProvider>.
If you want to read more about it visit React Aria's documentation about it here.
Next.js
Similar to React Router you can pass in the navigate prop the routes you get from the useRouter hook.
Also for more information please visit React Aria's documentation about it here.
Rewriting hrefs
The navigate prop decides how a click gets handled. The optional useHref prop decides what a link renders as its href attribute. Reach for it when your router serves the app from a prefix, such as a Next.js basePath.
<RouterProvider navigate={navigate} useHref={href => `${basePath}${href}`}>
{children}
</RouterProvider>Components still hand the unprefixed path to navigate, so your route definitions stay free of the prefix. Only the rendered attribute changes, which is what middle click, "copy link address" and search engine crawlers read.