SuperAPI AI 工具集

nuqs

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:nuqs 用于在 React 中实现类型安全的 URL 查询状态管理,把状态存进 URL,便于分享、刷新保持和前进后退。

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

使用方式:先按框架包裹 NuqsAdapter,例如 Next.js App Router 用 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。客户端组件用 useQueryState/useQueryStates;Next.js 服务端组件用 nuqs/server 的 createSearchParamsCache 并调用 parse()。测试可用 nuqs/adapters/testing 的 withNuqsTestingAdapter。

适用场景:可筛选/排序列表、分页、搜索参数同步、需要可分享 URL 状态的界面。

限制与注意:必须配置适配器;Next.js App Router 客户端组件需 Suspense;同一 key 不要用不同解析器;服务端必须调用 parse();引用类型自定义解析器需提供 eq;shallow、history、scroll、throttleMs、clearOnDefault 等选项按调用级、解析器级、hook 级、全局适配器级优先级生效。具体版本与安装命令资料未提供。