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