关于 nuqs
为不使用 TanStack Router 的 Vite React 应用提供 nuqs URL 状态管理规范。内容涵盖 URL 状态约定与关键配置,并指出使用 TanStack Router 的应用应改用其搜索参数。
主要功能
- 01可分享 URL 状态规范
- 02无路由器的 Vite React 配置
- 03默认历史记录与浅层更新行为
- 04JSON 解析验证指引
- 05批量更新相关查询参数
适用场景
- 01将可分享筛选条件保存在 URL
- 02在查询参数中保存地图坐标与缩放级别
- 03区分 URL 状态与临时 UI 状态
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ fixmyberlin/ fixmyskills --skill nuqs安装后在 Claude Code 中输入/nuqs确认已加载。
详细介绍
**LLM 参考:**获取 llms.txt,查看文档索引和最新 API。完整文档请见单个文件:llms-full.txt。适合人类阅读的文档:nuqs.dev/docs。
请勿在此技能中重复上游 API 参考;解析器、选项、测试适配器和故障排查请使用 llms.txt / llms-full.txt。
URL 状态规则(FMC)
| 应用 | URL 状态 |
|---|---|
| 使用 TanStack Router(SPA 或 Start) | Router 搜索参数:validateSearch — 技能 tanstack-router-conventions。绝不使用 nuqs。 |
| 不使用 TanStack Router 的 Vite React 应用 | nuqs |
对于 TanStack Router,请改用 validateSearch(tanstack-router-conventions → references/params-search-ui-routes.md)。
设置(Vite,无路由器)
import { NuqsAdapter } from 'nuqs/adapters/react'
createRoot(root).render(
<NuqsAdapter>
<App />
</NuqsAdapter>,
)
已在 nuqs 2.9.5 中验证适配器导出:NuqsAdapter 来自 nuqs/adapters/react。测试:NuqsTestingAdapter 来自 nuqs/adapters/testing(参见上游测试)。
**状态划分:**可通过 URL 分享的状态 → nuqs;临时 UI 状态 → Zustand(zustand-state-management)。
影响较大的注意事项
clearOnDefault— 默认值为true(等于默认值的值会从 URL 中移除)。只有在参数必须在默认值时仍保持可见的情况下,才设为false。- 历史记录和浅层更新 — 默认历史记录策略为
replace(需要返回按钮产生历史记录条目时,传入history: 'push');shallow默认为true。 parseAsJson— v2 及更高版本需要运行时验证器(例如 Zod schema)。- 调试 —
localStorage.debug = 'nuqs'。 - 包 — 仅支持 ESM;v2 中已移除
nuqs/parsers入口,请从nuqs导入解析器。 useQueryStates— 将相关参数(筛选条件、纬度/经度/缩放级别)批量合并为一次 URL 更新。
相关 FMC 技能
| 技能 | 作用 |
|---|---|
tanstack-router-conventions | 为使用 TanStack Router 的应用提供 validateSearch |
zustand-state-management | 不属于 URL 的临时客户端状态 |
评论
支持 Markdown