nuqs
文档游乐场注册表博客

One

将 nuqs 与 One 集成

One 以社区贡献的适配器形式受支持。

它不是内置的，因为它基于 React web 和 React Native，并且 会将大量依赖项拉入 nuqs 构建过程（使依赖安装时间加倍）。

如果它变得流行且有足够的社区需求，它可能被纳入 核心包中。

步骤 1：添加适配器代码

自定义适配器 API 尚未稳定，并在未来小版本或补丁版本中可能发生变化 （不符合 SemVer）。

app/nuqs-one-adapter.tsx
import {
  type unstable_AdapterOptions as AdapterOptions,
  unstable_createAdapterProvider as createAdapterProvider,
  renderQueryString
} from 'nuqs/adapters/custom'
import { useActiveParams, useRouter } from 'one'

function useNuqsOneAdapter() {
  const router = useRouter()
  const searchParams = new URLSearchParams(useActiveParams() as {})
  const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
    if (options.history === 'push') {
      router.push(renderQueryString(search), {
        scroll: options.scroll
      })
    } else {
      router.replace(renderQueryString(search), {
        scroll: options.scroll
      })
    }
  }
  return {
    searchParams,
    updateUrl
  }
}

export const NuqsAdapter = createAdapterProvider(useNuqsOneAdapter)

步骤 2：包装您的主路由

通过包装 <Slot> 组件，将适配器集成到根布局文件中：

app/_layout.tsx
import { NuqsAdapter } from './nuqs-one-adapter'
import { Slot } from 'one'

export default function Layout() {
  return (
    <>
      {typeof document !== 'undefined' && (
        <>
          <meta charSet="utf-8" />
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=5"
          />
          <link rel="icon" href="/favicon.svg" />
        </>
      )}
      <NuqsAdapter>
        <Slot />
      </NuqsAdapter>
    </>
  )
}