Skip to content

Commit 565e914

Browse files
RobHannayrook-is
andauthored
docs: add client side routing guide to RAC Link page (#9992)
* docs: restore client side routing / RouterProvider section in frameworks.mdx ♜ The previous `routing.html` page covered `RouterProvider` setup in detail (general API, React Router, Next.js app/pages router, Remix, TanStack Router) but is no longer linked from the new docs and `react-aria.adobe.com/routing` returns 404. The new `frameworks.mdx` page only mentions `RouterProvider` in passing inside the React Router (framework mode) tab and does not explain how to set it up. This restores the old detailed routing content as a 'Client side routing' section at the top of `frameworks.mdx`, ahead of the existing locale and bundler tabs (now grouped under 'Locale and bundler setup'). Co-authored-by: Rook <rook@rook.is> * docs: split client side routing setup across framework tabs ♜ Move the framework-specific RouterProvider setup into the existing Next.js, React Router, and a new TanStack Router tab in frameworks.mdx, rather than as one long section above all tabs. - Keep a brief 'Client side routing' intro above the tabs covering the general RouterProvider API and routerOptions. - Next.js tab: App Router (RouterProvider in client provider, plus optional basePath/useHref) and a 'Pages router' subsection. - React Router tab: framework-mode RouterProvider wired into the root layout, plus 'Declarative mode' and 'Remix' subsections. - New TanStack Router tab documents the createLink approach (RouterProvider not needed). - Bundler tabs (Parcel/Vite/webpack/Rollup/ESBuild) unchanged. Co-authored-by: Rook <rook@rook.is> * docs: explain client side routing via render prop instead of RouterProvider ♜ Replace the dead ./frameworks link on the Link docs page with a new 'Client side routing' section showing the render prop pattern for Next.js and React Router. Update getting-started.mdx to point to the Link docs for routing setup instead of the frameworks page. Revert previous changes to frameworks.mdx and remove TanStackRouter icon. Co-authored-by: Rook <rook@rook.is> --------- Co-authored-by: Rook <rook@rook.is>
1 parent 8028fd5 commit 565e914

2 files changed

Lines changed: 26 additions & 2 deletions

File tree

packages/dev/s2-docs/pages/react-aria/Link.mdx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,33 @@ export const description = 'Allows a user to navigate to another page or resourc
3434
files={["starters/tailwind/src/Link.tsx"]} />
3535
</ExampleSwitcher>
3636

37+
## Client side routing
38+
39+
By default, links with an `href` are handled by the browser as regular page navigations. To integrate with a client side router, use the `render` prop to delegate to your router's link component. This supports features like prefetching on hover and avoids full page reloads.
40+
41+
```tsx
42+
import {Link} from 'react-aria-components/Link';
43+
import NextLink from 'next/link';
44+
45+
<Link href="/about" render={props => <NextLink {...props} />}>
46+
About
47+
</Link>
48+
```
49+
50+
```tsx
51+
import {Link} from 'react-aria-components/Link';
52+
import {Link as RouterLink} from 'react-router';
53+
54+
<Link href="/about" render={props => <RouterLink {...props} to={props.href} />}>
55+
About
56+
</Link>
57+
```
58+
59+
See the [customization](customization#dom-elements) guide for more details on the `render` prop.
60+
3761
## Events
3862

39-
Links with an `href` will be handled by the browser, or via a [client side router](./frameworks). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.
63+
Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.
4064

4165
```tsx render
4266
"use client";

packages/dev/s2-docs/pages/react-aria/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,4 +185,4 @@ In this tutorial, we'll build a custom [Select](Select) component.
185185

186186
## Framework setup
187187

188-
React Aria works out of the box in any React framework. When you're ready, follow our [framework setup](frameworks) guide to optimize the bundle size, configure internationalization, and integrate with client side routers.
188+
React Aria works out of the box in any React framework. When you're ready, follow our [framework setup](frameworks) guide to optimize the bundle size and configure internationalization. To integrate with a client side router, use the `render` prop as described in the [Link](Link) docs.

0 commit comments

Comments
 (0)