路由
HeroUI 组件，例如 Tabs、 Listbox、 Dropdown 和许多其他组件提供了作为 HTML 链接渲染的灵活性。
简介
默认情况下，链接在交互时执行原生浏览器导航。但是，许多应用程序和框架使用客户端路由器来避免在页面之间导航时重新加载整个页面。
HeroUIProvider 组件配置其中的所有 HeroUI 组件，以使用您提供的客户端路由器进行导航。
在您的应用程序的 root 中设置一次，任何带有 href 属性的 HeroUI 组件都将自动使用您的路由器进行导航。
HeroUIProvider 设置
HeroUIProvider 组件接受 navigate 和 useHref 属性。navigate 是用于客户端导航的路由器函数，而 useHref 可选择将路由器 href 转换为原生 HTML href。 这是模式：
注意：以下显示了特定于框架的示例。
路由选项
所有 HeroUI 链接组件都接受一个 routerOptions 属性，该属性将选项传递给路由器的 navigate 函数，以控制滚动和历史记录导航等行为。
当使用 TypeScript 时，您可以全局配置 RouterConfig 类型，以便所有链接组件都具有自动完成和类型安全，使用您的路由器提供的类型。
Next.js
App Router
转到您的 app/providers.tsx 或 app/providers.jsx (如果不存在则创建它)，并添加来自 next/navigation 的 useRouter hook，它返回一个可用于执行导航的路由器对象。
查看 Next.js 文档 以获取更多详细信息。
添加 useRouter
将 Provider 添加到根目录
现在，转到您的 root 布局页面，并使用 HeroUIProvider 包装它
注意：如果您已经在您的应用程序中设置了
HeroUIProvider，请跳过此步骤。
Next.js 基础路径 (可选)
如果您正在使用 Next.js basePath 设置，您需要配置一个环境变量来访问它。
然后，提供一个自定义的 useHref 函数，将其前置到所有链接的 href。
Pages Router
转到 pages/_app.js 或 pages/_app.tsx (如果不存在则创建它)，并添加来自 next/router 的 useRouter hook，它返回一个可用于执行导航的路由器对象。
当使用 basePath 配置选项时，为传递给 Provider 的路由器提供 useHref 选项，以便自动将其添加到链接前面。
React Router
使用 react-router-dom 中的 useNavigate 钩子来获取用于路由的 navigate 函数。useHref 钩子可以与 React Router 的 basename 选项一起使用。
确保将使用这些钩子的组件放置在 BrowserRouter 内，并将 <Routes> 保留在 HeroUIProvider 内。以下是如何在你的 App 组件中设置它
确保调用 useNavigate 并渲染 HeroUIProvider 的组件位于路由器组件（例如 BrowserRouter）内部，以便它可以访问 React Router 的内部上下文。React Router 的 <Routes> 元素也应该在 HeroUIProvider 内部定义，以便渲染路由内的链接可以访问路由器。
Remix
Remix 在底层使用了 React Router，因此上面描述的 useNavigate 和 useHref 钩子也适用于 Remix 应用程序。HeroUIProvider 应该在包含 HeroUI 组件的每个页面的根目录中渲染，或者在 app/root.tsx 中添加到所有页面。有关更多详细信息，请参阅 Remix 文档。
TanStack
要将 TanStack Router 与 HeroUI 一起使用，请在你的根路由内渲染 HeroUI 的 RouterProvider。在 navigate 属性中使用 router.navigate，在 useHref 属性中使用 router.buildLocation。
使用示例
现在你已经在你的应用程序中设置了 HeroUIProvider，你可以在 Tabs、Listbox 和 Dropdown 项目中使用 href 属性来在页面之间导航。
Link 组件也将使用来自 HeroUIProvider 的 navigate 函数来在页面之间导航。
有关 React Aria 中路由的更多信息，请访问 React Aria 路由指南。
