SuperAPI AI 工具集

nuqs

前端与建站

查看项目

更新于 10-16 07:23

技能介绍

用途:nuqs 用于在 React 中实现类型安全的 URL 查询状态管理,把搜索参数当作状态使用,适合可筛选/排序列表、分页、搜索等需要与 URL 同步的场景。

主要能力:提供 useQueryState(单参数)与 useQueryStates(多参数)两个核心 Hook;内置 parseAsString、parseAsInteger、parseAsFloat、parseAsHex、parseAsBoolean、parseAsIsoDateTime、parseAsTimestamp、parseAsArrayOf、parseAsJson、parseAsStringEnum、parseAsStringLiteral、parseAsNumberLiteral 等解析器;支持 withDefault、withOptions、函数式更新、批量更新、urlKeys 短键映射、自定义解析器 createParser(含 eq 用于引用类型比较)。

使用方式:必须先按框架包裹适配器,例如 Next.js App Router 用 NuqsAdapter from 'nuqs/adapters/next/app',Pages Router 用 'nuqs/adapters/next/pages',React SPA 用 'nuqs/adapters/react',Remix 用 'nuqs/adapters/remix',React Router 用 'nuqs/adapters/react-router'。服务端组件通过 nuqs/server 的 createSearchParamsCache 并调用 parse() 读取参数。测试使用 nuqs/adapters/testing 的 withNuqsTestingAdapter。

限制与注意:缺少适配器会报错;适配器需与路由类型匹配;Next.js App Router 客户端组件需包 Suspense;同一 key 不要使用不同解析器;服务端必须调用 parse();useQueryState 仅限客户端组件;无默认值时需处理 null;引用类型自定义解析器需提供 eq;序列化需注意精度损失。