archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore(docs): update TanStack routing (#5629)

Browse Source
This commit is contained in:
WK 2025-08-24 22:21:05 +08:00 committed by GitHub
parent 928383bcfc
commit e43e44ff51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 86 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
apps/docs/content/docs/guide/routing.mdx
View File

@ -309,17 +309,96 @@ export default function App() {
## TanStack ## TanStack
To use [TanStack Router](https://tanstack.com/router/latest), use the [createLink](https://tanstack.com/router/latest/docs/framework/react/guide/custom-link) function to wrap each HeroUI component as a link. `RouterProvider` is not needed. To use [TanStack Router](https://tanstack.com/router/latest) with HeroUI, render HeroUI's RouterProvider inside your root route.
Use `router.navigate` in the `navigate` prop, and `router.buildLocation` in the `useHref` prop.
```tsx ```tsx
// app/root.tsx // app/root.tsx
import {createLink} from '@tanstack/react-router'; import type {NavigateOptions, ToOptions} from '@tanstack/react-router';
import {Link as HeroUILink, DropdownItem} from '@heroui/react';
export const Link = createLink(HeroUILink);
export const DropdownItemLink = createLink(DropdownItem); import {useRouter} from '@tanstack/react-router';
import {HeroUIProvider} from "@heroui/react";
declare module "@react-types/shared" {
interface RouterConfig {
href: ToOptions['to'];
routerOptions: Omit<NavigateOptions, keyof ToOptions>;
}
}
function RootRoute() {
let router = useRouter();
return (
<HeroUIProvider
navigate={(to, options) => router.navigate({to, ...options})}
useHref={(to) => router.buildLocation({to}).href}
>
{/* You app here... */}
</HeroUIProvider>
);
}
``` ```
<Spacer y={2} /> ## Usage examples
> For more information about routing in React Aria, visit the [React Aria Routing Guide](https://react-spectrum.adobe.com/react-aria/routing.html). Now that you have set up the `HeroUIProvider` in your app, you can use the `href` prop in the `Tabs`,
`Listbox` and `Dropdown` items to navigate between pages.
The [Link](/docs/components/link) component will also use the `navigate` function from the
`HeroUIProvider` to navigate between pages.
```jsx
import {
Tabs,
Tab,
Listbox,
ListboxItem,
Dropdown,
DropdownTrigger,
DropdownMenu,
DropdownItem,
Button,
Link,
} from "@heroui/react";
function App() {
return (
<>
<Tabs aria-label="Navigation">
<Tab key="home" href="/home">
Home
</Tab>
<Tab key="about" href="/about">
About
</Tab>
</Tabs>
<Listbox aria-label="Navigation">
<ListboxItem key="home" href="/home">
Home
</ListboxItem>
<ListboxItem key="about" href="/about">
About
</ListboxItem>
</Listbox>
<Dropdown>
<DropdownTrigger>
<Button>Open</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Navigation">
<DropdownItem key="home" href="/home">
Home
</DropdownItem>
<DropdownItem key="about" href="/about">
About
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Link href="/home">Home</Link>
<Link href="/about">About</Link>
</>
);
}
```